vue前端開發(fā)層次嵌套組件的通信詳解
前言
vue父子組件之間通過props很容易的將父組件的值傳遞給子組件，如果一個(gè)組件嵌套很多層，每一層之間度需要同props進(jìn)行傳值，很麻煩，且不易維護(hù)
示例
【示例】A組件中使用了B組件，B組件中使用了C組件，C組件需要使用A組件的數(shù)據(jù)text及使用A組件的方法getmethod。A組件代碼如下：
<template>
<div>
<P>這是A組件</P>
<v-comb></v-comb>
</div>
</template>
<script>
import comB from '@/view/comB.vue'
export default {
name: 'comA',
components: {
'v-comb': comB
},
data() {
return {
msg: '我是組件A中數(shù)據(jù)'
}
},
provide: function() { //注入給子組件屬性和方法
return {
text: this.msg,
getMethod: function() {
console.log('執(zhí)行根組件中的getMethod方法')
}
}
}
}
</script>
使用關(guān)鍵字provide，將數(shù)據(jù)和方法暴露給子組件
B組件是A組件子組件，是C組件的父組件，代碼如下
<template>
<div>
<div>
<P>這是B組件</P>
<v-comc></v-comc>
</div>
</div>
</template>
<script>
import comC from '@/view/comC.vue'
export default {
name: 'comB',
components: {
'v-comc': comC
}
}
</script>
C組件是A組件的孫子組件，C組件需要使用A組件的數(shù)據(jù)和方法，代碼如下：
<template>
<div style="border:1px solid orange;color:orange;">
<div>
<P>這是C組件</P>
<div>{{text}}</div>
<button @click="getMethod">調(diào)用父組件方法</button>
</div>
</div>
</template>
<script>
export default {
name: 'comC',
inject: ['text', 'getMethod'] //text和getMethod是provide提供的名字
}
</script>
這里使用inject關(guān)鍵字，接收A組件暴露的信息，這里特別注意， inject: []中接收名字必須與provide提供的名字完全一致。
運(yùn)行，界面如下圖所示
小結(jié)
多層次組件嵌套通信，vue通過provide & inject兩個(gè)關(guān)鍵字完成父組件向子孫組件直接傳值，使用起來(lái)非常方便。存在問題子組件與父組件存在一種強(qiáng)耦合關(guān)系，不再萬(wàn)不得已時(shí)不建議使用。
以上就是vue前端開發(fā)層次嵌套組件的通信詳解的詳細(xì)內(nèi)容，更多關(guān)于vue層次嵌套組件通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01
今天小編就為大家分享一篇Vue前后端不同端口的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
使用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”。這篇文章主要介紹了用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了如何讓別人訪問本地運(yùn)行的vue項(xiàng)目，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3使用vue-count-to組件的實(shí)現(xiàn)
這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作)
這篇文章主要介紹了vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了在項(xiàng)目vue中使用echarts的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
Vue與TypeScript的結(jié)合使得開發(fā)大型應(yīng)用變得更加容易和高效,本文將詳細(xì)探討Vue.js組件中TypeScript的應(yīng)用,特別是它的生命周期鉤子函數(shù),并通過豐富的示例,為你提供一個(gè)實(shí)戰(zhàn)指南,需要的朋友可以參考下2023-11-11