vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)
vue中我們常常用到組件. 那么組件總體可以分為如下的幾種關(guān)系.
父子組件, 爺孫組件, 兄弟組件. 這幾種組件之間是如何通信的呢?
父子組件通信
根據(jù)vue中的文檔可知, 組件的props屬性用于接收父組件傳遞的信息. 而子組件想要向父組件傳遞信息, 可以使用$emit事件.
我們定義兩個(gè)組件, 一個(gè)為父組件名為father, 另外一個(gè)為子組件child. 子組件通過(guò)props屬性接收父組件傳遞的值, 這個(gè)值為fname, 是父組件的名字. 點(diǎn)擊子組件的按鈕, 觸發(fā)toFather事件, 向父組件傳遞消息. 父組件做出相應(yīng)的反應(yīng).
將父組件和子組件放入名為app的vue實(shí)例中
Vue.component('child', {
props: ['fname'],
template: `
<div class="child">
這是兒子, 我爸爸是{{fname}}
<button @click="$emit('toFather')">點(diǎn)我通知爸爸</button>
</div>
`
})
Vue.component('father', {
data() {
return {
info: '無(wú)消息'
}
},
template: `
<div class="father">
這是父親, {{info}}
<child fname="father" @toFather="getSonMsg"></child>
</div>
`,
methods: {
getSonMsg() {
this.info = '我收到兒子傳來(lái)的消息了'
}
}
})
new Vue({
el: '#app',
})
注意上面的組件定義順序不能換
讓后我們?cè)趆tml文件中寫(xiě)入即可
<div id="app"> <father></father> </div>
點(diǎn)擊按鈕后發(fā)現(xiàn)我們的父組件發(fā)生了變化
點(diǎn)擊這里可以查看效果
爺孫組件通信
因?yàn)関ue只是說(shuō)明了父子組件如何通信, 那么爺孫組件是沒(méi)有辦法直接通信的. 但是它們可以分解為兩個(gè)父子組件通信.
即爺爺和父親看成是一個(gè)父子組件, 而父親和孫子看成是一個(gè)父子組件. 這樣它們之間就可以進(jìn)行通信了. 通過(guò)父親組件合格橋梁, 可以實(shí)現(xiàn)爺孫的通信. (注意: 爺孫組件是無(wú)法直接通信的)
兄弟組件通信
兄弟組件通信即組件之間通信. 這就要用到觀察者模式了. 因?yàn)関ue實(shí)例的原型全部來(lái)自Vue.prototype. 那么我們就可以了將事件中心綁定到Vue.prototype的某個(gè)屬性上, 暫且叫它為bus吧.
let bus = new Vue()
Vue.prototype.bus = bus
我們?cè)俣x兩個(gè)組件, up組件和down組件, 當(dāng)點(diǎn)擊down組件中的按鈕時(shí), 會(huì)給up組件傳遞信息.
Vue.component('up', {
data() {
return {
msg: '未傳遞消息'
}
},
template: `
<div class="up">
<p>這是up組件, 下一行為down傳遞的消息</p>
<p>{{msg}}</p>
</div>
`,
mounted() {
this.bus.$on('send', (msg)=> {
this.msg = (msg)
})
}
})
Vue.component('down', {
template: `
<div class="down">
<p>這是down</p>
<button @click="toUp">點(diǎn)擊我向up組件傳遞消息</button>
</div>
`,
methods: {
toUp() {
this.bus.$emit('send', 'down來(lái)消息了')
}
}
})
new Vue({
el: '#app',
})
并且將兩個(gè)組件放入名為app的實(shí)例中
<div id="app"> <up></up> <down></down> </div>
按鈕被點(diǎn)擊后, up組件會(huì)接收到消息
點(diǎn)擊這里查看源代碼
以上這篇vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微前端的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue中使用require.context自動(dòng)引入組件的操作方法
require.context?是?webpack?提供的一個(gè)API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個(gè)模塊,并且可以靈活地控制模塊的加載順序和依賴(lài)關(guān)系,本文給大家講解Vue中使用require.context自動(dòng)引入組件的方法,感興趣的朋友一起看看吧2024-01-01
解決el-menu標(biāo)題過(guò)長(zhǎng)顯示不全問(wèn)題
本文主要介紹了如何解決el-menu標(biāo)題過(guò)長(zhǎng)顯示不全問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的朋友們跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題
這篇文章主要介紹了解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家介紹了Vue的鍵盤(pán)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
這篇文章主要介紹了Vue 原生實(shí)現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識(shí)點(diǎn)vue點(diǎn)擊菜單以外區(qū)域，隱藏菜單操作，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12
vue在響應(yīng)頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應(yīng)頭response中獲取自定義headers操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問(wèn)題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問(wèn)題(用watch解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03