正常使用provide的方式:
父组件中:
provide:{
for:'demo'
}
这样子组件中无论多深的子组件都可以使用:
inject:['for'],
data(){
return{
demo:this.for
}
}
但是上面的写法有一定的问题,比如父组件中for变量的值如果我们是在mounted方法中请求后台数据再更改provide中for的值,那么在子组件中获取不到更改后的for的值。
这时候就需要换一种写法:
父组件中:
provide() {
return {
provObj: {
for: '',
},
};
},
mounted() {
setTimeout(()=>{
this._provided.provObj.for= 'demo';
},2000);
}
子组件中:
inject:['provObj'],
data(){
return{
demo:this.provObj.for
}
}
这样就可以获取到在mounted中才给provide赋上的值。