vue3

13.Vue3/project3/src/App.vue

@@ -13,6 +13,15 @@
 				<RouterLink active-class="active" class="list-group-item" to="/refs-parent">4. refs-parent</RouterLink>
 				<RouterLink active-class="active" class="list-group-item" to="/attrs">5. $attrs</RouterLink>
 				<RouterLink active-class="active" class="list-group-item" to="/provide">6. provide-inject</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/slot1">7. 默认插槽</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/slot2">8. 具名插槽</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/slot3">9. 作用域插槽</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/slot4">10. 插槽测试</RouterLink>
+				<!-- 
+					发布订阅 mixin 全局事件总线
+					pinia vuex 
+					v-model(数据传递)
+				 -->
 				
 			</div>
 			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">

13.Vue3/project3/src/router/index.ts

@@ -33,6 +33,22 @@ const router = createRouter({
         name: 'provide',
         component: () => import("../views/Provide-inject/Father.vue")
     },
+    {
+        path:'/slot1',
+        component: () => import("../views/Slot1/Part1.vue")
+    },
+    {
+        path:'/slot4',
+        component: () => import("../views/Slot1/Part3.vue")
+    },
+    {
+        path:'/slot2',
+        component: () => import("../views/Slot2/Part1.vue")
+    },
+    {
+        path:'/slot3',
+        component: () => import("../views/Slot3/Part1.vue")
+    }
   ],
 })
 

13.Vue3/project3/src/views/Slot1/Part1.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1>默认插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      自我介绍
+    </Part2>
+    <hr>
+    <hr>
+    <hr>
+  </div>
+</template>
+
+<script setup>
+import Part2 from './Part2.vue'
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Slot1/Part2.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h3>Part2</h3>
+    
+    <slot>标题</slot>
+    <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Slot1/Part3.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>Part3</h1>
+    <hr>
+    <Part2>
+        功能介绍
+    </Part2>
+    <hr>
+    <hr>
+    <hr>
+  </div>
+</template>
+
+<script setup>
+import Part2 from './Part2.vue'
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Slot2/Part1.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>具名插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      <template #s2>
+        <h3>
+          我好
+        </h3>
+      </template>
+      
+      <template v-slot:s1>
+        <h1>
+          你好
+        </h1>
+      </template>
+      <template v-slot:default>
+        <h3>
+          大家好
+        </h3>
+      </template>
+      
+    </Part2>
+  </div>
+</template>
+
+<script setup>
+import Part2 from './Part2.vue'
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Slot2/Part2.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <slot name='s1'></slot>
+    <h3>Part2.0</h3>
+    <h3>Part2.1</h3>
+    <slot name="s2"></slot>
+    <h3>Part2.2</h3>
+    <h3>Part2.3</h3>
+    <slot></slot>
+    <h3>Part2.4</h3>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Slot3/Part1.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h1>作用域插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      <template v-slot:one='{list1}' >
+        <h2>第一个</h2>
+        <div>
+          <ul>
+            <li v-for="(item,index) in list1" :key='index'>
+              {{item.name}}
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template v-slot:two='{list1}' >
+        <h2>第二个</h2>
+        <div>
+          <ul>
+            <li v-for="(item,index) in list1" :key='index'>
+              {{item.name}}
+            </li>
+          </ul>
+        </div>
+      </template>
+    </Part2>
+  </div>
+</template>
+
+<script setup>
+import Part2 from './Part2.vue'
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Slot3/Part2.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <slot name="one" :list1='list'></slot>
+    <h3>Part2</h3>
+    <slot name="two" :list1='list'></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+let list = reactive([
+  {
+    id:1,
+    name:'孙悟空'
+  },
+  {
+    id:2,
+    name:'猪八戒'
+  },
+  {
+    id:3,
+    name:'沙和尚'
+  },
+])
+</script>
+<style lang='scss' scoped>
+
+</style>