vue3

16.vue3/project3/src/views/Provide-inject/Father.vue

@@ -13,9 +13,7 @@
 import { ref, provide } from "vue";
 import Child from "./Child.vue";
 let flower = ref(10);
-function sendMain() {
-  provide("xxx", flower);
-}
+provide("x", { flower });
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/Provide-inject/GrandSon.vue

@@ -2,16 +2,16 @@
   <div>
     <h1 class="h-26 text-6xl">孙组件</h1>
     <button @click="showMain">展示</button>
-    <!-- <h1 class="h-26 text-6xl">展示:{{ x1 }}</h1> -->
+    <h1 class="h-26 text-6xl">展示:{{ x.flower }}</h1>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, inject } from "vue";
-function showMain() {
-  let x1 = inject("x");
-  console.log(inject("xxxx"));
-}
+
+let x = inject("x");
+console.log(inject("x"));
+function showMain() {}
 </script>
 
 <style lang="scss" scoped>

16.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>32323</Part2>
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h1 class="h-26 text-6xl">Part2</h1>
     <slot></slot>
+    <h1 class="h-26 text-6xl">Part2</h1>
   </div>
 </template>
 

16.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:s3>
+        <p>111</p>
+      </template>
+      <template #default>
+        <p>222</p>
+      </template>
+      <template v-slot:s2>
+        <p>333</p>
+      </template>
+    </Part2>
   </div>
 </template>
 

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

@@ -2,6 +2,10 @@
   <div>
     <h1 class="h-26 text-6xl">Part2</h1>
     <slot></slot>
+    <h1 class="h-26 text-6xl">哈哈哈</h1>
+    <slot name="s2"></slot>
+    <h1 class="h-26 text-6xl">嘿嘿黑</h1>
+    <slot name="s3"></slot>
   </div>
 </template>
 

16.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:xxx="{ list }">
+        <ul>
+          <li v-for="item in list" :key="item.id">{{ item.name }}</li>
+        </ul>
+      </template>
+      <template #default>你好</template>
+    </Part2>
   </div>
 </template>
 

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

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