vue组件通信

20.vue3/project3/src/router/index.ts

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

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

@@ -1,8 +1,7 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">Provide-inject</h1>
-    <h3 class="h-16 text-4xl"></h3>
-    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl">我有{{ car }}辆车</h3>
     <hr class="h-15" />
     <hr class="h-15" />
     <Child></Child>
@@ -10,7 +9,13 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, reactive, provide } from "vue";
 import Child from "./Child.vue";
+let car = ref(10);
+provide("x", { car });
+// provide("x", { car });
+// provide("x", { car });
+// provide("x", { car });
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,11 +1,16 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">孙组件</h1>
+    <h3 class="h-16 text-4xl">我继承了{{ x1.car }}辆车</h3>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, inject } from "vue";
+let x1 = inject("x");
+// let x1 = inject("x");
+// let x1 = inject("x");
+// let x1 = inject("x");
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">默认插槽</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Part2></Part2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Part2 from "./Part2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Part2</h1>
+    <h3 class="h-16 text-4xl"></h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">具名插槽</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Part2></Part2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Part2 from "./Part2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Part2</h1>
+    <h3 class="h-16 text-4xl"></h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">作用域插槽</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Part2></Part2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Part2 from "./Part2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Part2</h1>
+    <h3 class="h-16 text-4xl"></h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>