组件通信

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

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>Child</h1>
+    <hr>
+    <hr>
+    <hr>
+    <GrandSon></GrandSon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue";
+import GrandSon from "./GeandSon.vue";
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,12 +1,24 @@
 <template>
   <div>
     <h1>provide-inject</h1>
+    <h2>我有{{ num }}本书</h2>
+    <button @click="changeBook">给孙子一半的书</button>
+    <hr />
+    <hr />
+    <hr />
+    <Child></Child>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive} from 'vue'
+import { ref, provide } from "vue";
+import Child from "./Child.vue";
+let num = ref(10);
+let sum = ref(0);
+function changeBook() {
+  sum.value = num.value / 2;
+}
+provide("aaa", { sum });
 </script>
 <style lang='scss' scoped>
-
 </style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <h1>展示:{{ sum }}</h1>
+  </div>
+</template>
+
+<script setup>
+import {ref,inject} from "vue";
+let {sum} = inject("aaa")
+console.log(inject("aaa"))
+</script>
+
+<style lang="scss" scoped>
+</style>