组件通信

12.vue3/project3/src/views/Provide-inject/GeandSon.vue

@@ -7,8 +7,7 @@
 
 <script setup>
 import {ref,inject} from "vue";
-let {sum} = inject("aaa")
-console.log(inject("aaa"))
+let {sum} = inject("aaa");
 </script>
 
 <style lang="scss" scoped>

12.vue3/project3/src/views/Slot1/Part1.vue

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

12.vue3/project3/src/views/Slot1/Part2.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h2>Part1</h2>
+    <h1>haaaaaaaa</h1>
+    <h1>haaaaaaaa</h1>
+    <slot></slot>
+    <h1>haaaaaaaa</h1>
+    <h1>haaaaaaaa</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Slot2/Part1.vue

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

12.vue3/project3/src/views/Slot2/Part2.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h2>Part2</h2>
+     <slot name="s1"></slot>
+    <h1>haaaaaaaa</h1>
+    <h1>haaaaaaaa</h1>
+    <slot></slot>
+    <h1>haaaaaaaa</h1>
+     <slot name="s3"></slot>
+    <h1>haaaaaaaa</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Slot3/Part1.vue

@@ -1,11 +1,31 @@
 <template>
   <div>
     <h1>作用域插槽</h1>
+    <hr>
+    <hr>
+    <hr>
+    <Part2>
+      <template  v-slot:s3="{list1}">
+        <ul>
+          <li v-for="(item,index) in list1" :key="index">
+            {{ item.id }}
+          </li>
+        </ul>
+      </template>
+      <template  v-slot:s1="{list1}">
+        <ul>
+          <li v-for="(item,index) in list1" :key="index">
+            {{ item.name }}
+          </li>
+        </ul>
+      </template>
+    </Part2>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive} from 'vue'
+import Part2 from './Part2.vue';
 
 </script>
 <style lang='scss' scoped>

12.vue3/project3/src/views/Slot3/Part2.vue

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