vue组件通信

20.vue3/project3/src/views/slot1/Part1.vue

@@ -5,7 +5,7 @@
     <h3 class="h-16 text-4xl"></h3>
     <hr class="h-15" />
     <hr class="h-15" />
-    <Part2></Part2>
+    <Part2>6666</Part2>
   </div>
 </template>
 

20.vue3/project3/src/views/slot1/Part2.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">Part2</h1>
-    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl">页尾</h3>
+    <slot></slot>
   </div>
 </template>
 

20.vue3/project3/src/views/slot2/Part1.vue

@@ -5,7 +5,17 @@
     <h3 class="h-16 text-4xl"></h3>
     <hr class="h-15" />
     <hr class="h-15" />
-    <Part2></Part2>
+    <Part2>
+      <template v-slot:footer>
+        <p>111</p>
+      </template>
+      <template #header>
+        <p>222</p>
+      </template>
+      <template #default>
+        <p>333</p>
+      </template>
+    </Part2>
   </div>
 </template>
 

20.vue3/project3/src/views/slot2/Part2.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">Part2</h1>
-    <h3 class="h-16 text-4xl"></h3>
+    <slot name="header"></slot>
+    <h3 class="h-16 text-4xl">页尾</h3>
+    <slot></slot>
+    <h3 class="h-16 text-4xl">页尾11</h3>
+
+    <slot name="footer"></slot>
   </div>
 </template>
 

20.vue3/project3/src/views/slot3/Part1.vue

@@ -5,7 +5,14 @@
     <h3 class="h-16 text-4xl"></h3>
     <hr class="h-15" />
     <hr class="h-15" />
-    <Part2></Part2>
+    <Part2>
+      <template v-slot:xx="{ list }">
+        <ul>
+          <li v-for="item in list" :key="item.id">{{ item.name }}</li>
+        </ul>
+      </template>
+      <template v-slot:default>你好</template>
+    </Part2>
   </div>
 </template>
 

20.vue3/project3/src/views/slot3/Part2.vue

@@ -1,12 +1,28 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">Part2</h1>
-    <h3 class="h-16 text-4xl"></h3>
+    <slot :list="obj" name="xx"></slot>
+    <h3 class="h-16 text-4xl">页尾</h3>
+    <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+let obj = reactive([
+  {
+    name: "孙悟空",
+    id: 11,
+  },
+  {
+    name: "猪八戒",
+    id: 22,
+  },
+  {
+    name: "沙和尚",
+    id: 33,
+  },
+]);
 </script>
 
 <style lang="scss" scoped>