概念
provide/inject这是一个组件的链式通信,provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide 提供的数据或方法。
用inject的组件会不断向上找拥有provide的父组件,知道找到为止。
这个通信的方法可能做业务的时候用不到,但是去开发底层的一些通用组件就会用到。
使用
非响应式
一般是传基本类型时,父组件改变该传递的值了,子组件不会跟着改变。
父组件:
// 父级组件提供 dadMes
data() {
return {
str: '这是爸爸的信息',
};
},
provide() {
return {
dadMes: this.str
}
}
子组件:
// 子组件注入 dadMes
inject: ['dadMes'], // 传字符串可以简化使用
created () {
console.log(this.dadMes) // => '这是爸爸的信息'
this.dadMes = 'zzz' // 避免修改,虽然能改但是会报错提示
}
// 完整写法***************************
inject:{
dadMes:{
// from: 'dadMes', // 这样子就可以给注入的变量自定义名称了,防止冲突
default:()=>({})
}
}
以上写法要避免数据的修改,第一,父向子修改是非响应式;第二子向父修改是会报错的;
响应式
如果直接把整个组件传下去,就不会出现非响应式问题,但应该性能损耗也大。
父组件
provide() {
return {
dadDom: this // 整个组件
}
},
子组件
// inject: ['dadDom']
inject:{
dadDom:{
default:()=>({})
}
},
methods:{
showStr(){
console.log(this.dadDom.str)
this.dadDom.str = '换成儿子了' // 可以修改
}
}
如果不想传整个组件,可以通过计算属性指定data中的值:
provide(){
return {
info: computed(()=>{this.xxx}) // vue3写法
}
}
与vuex的区别
Vuex 和 provide/inject 最大的区别在于,Vuex 中的全局状态的每次修改是可以追踪回溯的,而 provide/inject 中变量的修改是无法控制的,换句话说,你不知道是哪个组件修改了这个全局状态。
与props的区别
props如果嵌套的组件太多,容易形成强耦合
缺点
provide/inject 明显破坏了单向数据流原则。试想,如果有多个后代组件同时依赖于一个祖先组件提供的状态,那么只要有一个组件修改了该状态,那么所有组件都会受到影响。这一方面增加了耦合度,另一方面,使得数据变化不可控。如果在多人协作开发中,这将成为一个噩梦。