why
Vue父子組件間可以通過(guò)props屬性做向下參數(shù)傳遞焊虏,但如果對(duì)于更下一層的子孫級(jí)組件時(shí),如果繼續(xù)通過(guò)props來(lái)做傳遞就麻煩很多
基于此诵闭,我們可以通過(guò)provide和inject來(lái)實(shí)現(xiàn)這種子孫級(jí)的嵌套
how
在父組件通過(guò)provide聲明提供的對(duì)象
在孫組件上通過(guò)inject 聲明注入的變量名
在實(shí)例化孫組件時(shí)會(huì)一層層往父組件查詢(xún)是否有provide提供的對(duì)象,如果有聲明瘟芝,根據(jù)key進(jìn)行變量值注入
父組件
{
provide:{
name:"lijiaxin"
}
}
子孫組件
{
inject:["name"]
}
注:provide亦可以聲明為函數(shù)褥琐,返回對(duì)象(對(duì)象可以返回響應(yīng)式對(duì)象)
{
data:{
test:{
name:"lijiaxin"
}
},
provide:function(){
return {
test:this.test
}
}
}
{
inject:["test"]
}