vue前端開(kāi)發(fā)自學(xué),祖孫多層級(jí)組件嵌套關(guān)系數(shù)據(jù)傳輸！官方提供了一個(gè)解決方案，就是，在根組件內(nèi)使用provide,哪個(gè)子孫組件想調(diào)用這個(gè)數(shù)據(jù)，就可以inject接收就行了。雖然是方便了，但是這個(gè)有點(diǎn)要求，就是只能自上而下的傳遞。不能反過(guò)來(lái)（不能子孫給根節(jié)點(diǎn)?。?/p>
<template>
<h3>組件之間，層級(jí)嵌套數(shù)據(jù)透?jìng)骶毩?xí)</h3>
<Parent />
</template>
<script>
import Parent from './components/Parent.vue';
export default{
components:{
Parent
},
data(){
return{
srcinfo2:"我是根節(jié)點(diǎn)數(shù)據(jù)"
}
},
provide(){
//使用函數(shù)的形式，可以訪問(wèn)到this對(duì)象
return{
srcinfo:this.srcinfo2
}
}
}
</script>如圖，根組件內(nèi)，我們使用了函數(shù)的樣式，調(diào)用函數(shù)樣式的好處！是可以讓我們?cè)L問(wèn)到當(dāng)前頁(yè)面的動(dòng)態(tài)數(shù)據(jù)。
<template>
<h3>Parent</h3>
<p>{{ msg }}</p>
<Child />
</template>
<script>
import Child from './Child.vue';
export default{
components:{
Child
},
data(){
return {
msg:this.srcinfo
}
},
inject:["srcinfo"],
}
</script>parent.VUE組件內(nèi)的代碼展示。
<template>
<h3>Child</h3>
<p>{{ msg }}</p>
</template>
<script>
export default{
inject:["srcinfo"],
data(){
return {
msg:this.srcinfo
}
}
}
</script>child.vue組件內(nèi)代碼展示。
下面看看實(shí)際的瀏覽器效果。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-796029.html
如圖，可以看見(jiàn)，無(wú)論是父節(jié)點(diǎn)，還是子孫節(jié)點(diǎn)，都是可以拿到根節(jié)點(diǎn)定義的數(shù)據(jù)的。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-796029.html
到了這里，關(guān)于vue前端開(kāi)發(fā)自學(xué),祖孫多層級(jí)組件嵌套關(guān)系數(shù)據(jù)傳輸?shù)奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
