一、情景说明
我们学习了很多的组件间通信
这里在学习一种,祖先组件与后代组件间通信的技术
这里的后代,可以是多层继承关系,子组件,子子组件,子子子组件等等。
- 在祖先组件中通过
provide
配置向后代组件提供数据 - 在后代组件中通过
inject
配置来声明接收数据
二、案例
1、父组件
javascript
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、子子组件
接收到之后,就可以当成自己的变量直接操作了
javascript
import { inject } from 'vue';
// 注入数据
let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
let car = inject('car')
注意,我们可以发现,provide
可以传递变量,也可以传递函数
当传递函数的时候,后代组件就可以调用该祖先组件的函数,从而,间接的操作祖先组件中的变量
实现,反向通信