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