概念
我们可以使用v-bind、prop来给子组件传递父组件的值,可以使用.sync、$emit来修改父组件的值,那么如果我有很多子组件并且我需要全部都使用父组件上面的数据以及修改数据,我应该怎么做呢?
vue提供了provide和inject来供我们provide(提供)大规模的data或methods注入(inject)子组件中使用
参数
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
使用方法
...
provide(){ //在使用组件时,只能用函数的方式
return {num:this.num,add:this.add}
},
data(){
return {
num:1 //这里传入的是简单数据类型
}
},
methods:{
add(){
this.num+=1
}
}
//子组件
inject: ["add", "num"]
上面的代码中,我们传入了一个简单数据类型num,由于传值时是copy这个数据给子组件,所以这时候如果我给子组件设置修改num,不会影响到父组件的num,而仅仅只是子组件的num而已。
如果要解决这个问题,我们可以将num:1转化为num:{value:1},这样拷贝的就是地址,就可以对其进行修改。但一般来说由于Provide、Inject能够提供给所有子组件数据对象,所以不建议通过子组件大规模修改,以免造成混乱。
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。
一般来说,我们可以通过传入父组件的methods方法来让子组件控制父组件的数据。
总结
- 在使用provide和inject时,我们要知道传入的数据是数据拷贝,不管这个数据里面是地址还是值
- provide和inject适用场景为大规模、深层次的子组件共用父组件的data、methods等选项。
- 可以把父组件当成数据仓库,子组件当成使用者这样来记忆,父组件提供数据方法、子组件调用。