Provide / Inject
通常,當(dāng)我們需要從父組件向子組件傳遞數(shù)據(jù)時,我們使用 [props]想象一下這樣的結(jié)構(gòu):有一些深度嵌套的組件魁亦,而深層的子組件只需要父組件的部分內(nèi)容虚吟。在這種情況下,如果仍然將 prop 沿著組件鏈逐級傳遞下去怠肋,可能會很麻煩敬鬓。
對于這種情況,我們可以使用一對 provide 和 inject笙各。無論組件層次結(jié)構(gòu)有多深钉答,父組件都可以作為其所有子組件的依賴提供者。這個特性有兩個部分:父組件有一個 provide 選項來提供數(shù)據(jù)酪惭,子組件有一個 inject 選項來開始使用這些數(shù)據(jù)希痴。
第一種寫法:這是默認(rèn)寫法,綁定并不是響應(yīng)式的
祖先組件
provide:{
name:'傳遞參數(shù)', 注意不能訪問provide的實例的property春感。比如傳遞一個數(shù)組的長度砌创,就會報錯虏缸,建議用第二種
}
子組件孫組件等等不管嵌套多少層都可以拿到
inject:['name'],
第二種寫法:這種是響應(yīng)式的
祖先組件
provide(){
return{
list:Vue.computed(() => this.name.length) ,
content:Vue.computed(() => this.content.length) ,
}
},
inject:['list','content'],