正常使用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赋上的值。