组件通信

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

@@ -1,12 +1,17 @@
 <template>
   <div>
     <h1>slot1</h1>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>hahhahahhhahahahah</Part2>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import Part2 from "../Slot1/Part2.vue"
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>Part2</h1>
+    <p>
+      defineProps 和 defineEmits 都是只能在
+      中使用的编译器宏。他们不需要导入，且会随着 的处理过程一同被编译掉。
+      defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits
+      选项相同的值。
+      <br>
+      <br>
+       defineProps 和 defineEmits
+      在选项传入后，<slot></slot>会提供恰当的类型推导。 传入到 defineProps 和 defineEmits
+      的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup
+      作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,12 +1,27 @@
 <template>
   <div>
     <h1>slot2</h1>
+    <hr />
+    <hr />
+    <hr />
+    <hr />
+    <Part2>
+      <template #cc>
+        <h1>哈哈哈哈哈</h1>
+      </template>
+      <template v-slot:aa>
+        <h2>你好你好你好你好你好你好</h2>
+      </template>
+      <template #default>
+        <h3>大家好大家好大家好大家好大家好</h3>
+      </template>
+    </Part2>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import { ref, reactive } from "vue";
+import Part2 from "../Slot2/Part2.vue";
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>Part2</h1>
+    <p>
+      defineProps 和 defineEmits 都是只能在
+      中使用的编译器宏。<slot name="aa">1111</slot>他们不需要导入，且会随着 的处理过程一同被编译掉。
+      defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits
+      选项相同的值。
+      <br>
+      <br>
+       defineProps 和 defineEmits
+      在选项传入后，<slot>2222</slot>会提供恰当的类型推导。 传入到 defineProps 和 defineEmits
+      的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup
+      作用域中声明的局部变量。<slot name="cc">3333</slot>这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,12 +1,32 @@
 <template>
   <div>
     <h1>slot3</h1>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      <template v-slot:two="{list2}">
+        <ul>
+          <li v-for="(item,index) in list2" :key="index">
+            {{ item.desc }}
+          </li>
+        </ul>
+      </template>
+      <template v-slot:one="{list1}">
+        <ul>
+          <li v-for="(item,index) in list1" :key="index">
+            {{ item.name }}
+          </li>
+        </ul>
+      </template>
+    </Part2>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import Part2 from "./Part2.vue";
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <slot name="one" :list1="list"></slot>
+    <h1>Part2</h1>
+    <slot name="two" :list2="list"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let list = reactive([
+  {
+    name:'孙悟空',
+    desc:'齐天大圣'
+  },{
+    name:'猪八戒',
+    desc:'天蓬元帅'
+  },{
+    name:'沙和尚',
+    desc:'卷帘大将'
+  }
+])
+</script>
+
+<style lang="scss" scoped>
+</style>