组件通信

15.vue3/vue_project2/src/App.vue

@@ -13,6 +13,9 @@
 				<RouterLink active-class="active" class="list-group-item" to="/ref1">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>
 			
 			</div>
 			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">

15.vue3/vue_project2/src/router/index.ts

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

15.vue3/vue_project2/src/views/Slot1/Part1.vue

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

15.vue3/vue_project2/src/views/Slot1/Part2.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>Part2</h1>
+    <hr>
+    <hr>
+    <slot>标题</slot>
+    <hr>
+    <hr>
+    <p>
+      你好
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/vue_project2/src/views/Slot2/Part1.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>具名插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      <template v-slot:footer>
+        第一个
+      </template>
+      <template #header>
+        第二个
+      </template >
+      <template #default>
+        第三个
+      </template>
+      
+    </Part2>
+    <hr>
+  </div>
+</template>
+
+<script setup>
+import Part2 from './Part2.vue';
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/vue_project2/src/views/Slot2/Part2.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Part2</h1>
+    <slot name="header">2</slot>
+    <hr>
+    <hr>
+    <slot>1</slot>
+    <hr>
+    <hr>
+    <slot name="footer">4</slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/vue_project2/src/views/Slot3/Part1.vue

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

15.vue3/vue_project2/src/views/Slot3/Part2.vue

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