组件通信

17.Vue3/project3/src/views/Provide-inject/Child.vue

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

17.Vue3/project3/src/views/Provide-inject/Father.vue

@@ -1,12 +1,28 @@
 <template>
   <div>
     <h1>provide-inject</h1>
+    <h3>我有{{ flower }}朵花</h3>
+    <button @click="giveFlower">给孙组件十朵花</button>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Child></Child>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import {ref,reactive,provide} from "vue" 
+import Child from "./Child.vue";
+let flower = ref(100);
+let newFlower =ref(0);
+const giveFlower = () => {
+  flower.value -= 10;
+  newFlower.value += 10;
+  console.log(newFlower.value,'newFlower');
+};
+let a = ref(12);
+provide('flower1',{newFlower,a})
 </script>
 
 <style lang="scss" scoped>

17.Vue3/project3/src/views/Provide-inject/GrandSon.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <p>{{ newFlower }}---{{ a }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,inject} from "vue" 
+interface FlowerType {
+  newFlower: number;
+  a: number;
+}
+let {newFlower,a} = inject('flower1') as FlowerType;
+// console.log(flowerFromFather);
+// let [s,d,f]= [1,2,3]
+</script>
+
+<style lang="scss" scoped>
+</style>