Vue3：组件间通信-provide和inject实现祖先组件与后代组件间直接通信

一、情景说明

我们学习了很多的组件间通信
这里在学习一种，祖先组件与后代组件间通信的技术
这里的后代，可以是多层继承关系，子组件，子子组件，子子子组件等等。

• 在祖先组件中通过provide配置向后代组件提供数据
• 在后代组件中通过inject配置来声明接收数据

二、案例

1、父组件

  import { ref,reactive,provide } from "vue";// 数据let money = ref(100)let car = reactive({brand:'奔驰',price:100})// 用于更新money的方法function updateMoney(value:number){money.value += value}// 提供数据provide('moneyContext',{money,updateMoney})provide('car',car)

2、子子组件
接收到之后，就可以当成自己的变量直接操作了

  import { inject } from 'vue';// 注入数据let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})let car = inject('car')

注意，我们可以发现，provide可以传递变量，也可以传递函数
当传递函数的时候，后代组件就可以调用该祖先组件的函数，从而，间接的操作祖先组件中的变量
实现，反向通信