vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)
vue中我們常常用到組件. 那么組件總體可以分為如下的幾種關(guān)系.
父子組件, 爺孫組件, 兄弟組件. 這幾種組件之間是如何通信的呢?
父子組件通信
根據(jù)vue中的文檔可知, 組件的props屬性用于接收父組件傳遞的信息. 而子組件想要向父組件傳遞信息, 可以使用$emit事件.
我們定義兩個(gè)組件, 一個(gè)為父組件名為father, 另外一個(gè)為子組件child. 子組件通過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: '無消息'
}
},
template: `
<div class="father">
這是父親, {{info}}
<child fname="father" @toFather="getSonMsg"></child>
</div>
`,
methods: {
getSonMsg() {
this.info = '我收到兒子傳來的消息了'
}
}
})
new Vue({
el: '#app',
})
注意上面的組件定義順序不能換
讓后我們?cè)趆tml文件中寫入即可
<div id="app"> <father></father> </div>
點(diǎn)擊按鈕后發(fā)現(xiàn)我們的父組件發(fā)生了變化
點(diǎn)擊這里可以查看效果
爺孫組件通信
因?yàn)関ue只是說明了父子組件如何通信, 那么爺孫組件是沒有辦法直接通信的. 但是它們可以分解為兩個(gè)父子組件通信.
即爺爺和父親看成是一個(gè)父子組件, 而父親和孫子看成是一個(gè)父子組件. 這樣它們之間就可以進(jìn)行通信了. 通過父親組件合格橋梁, 可以實(shí)現(xiàn)爺孫的通信. (注意: 爺孫組件是無法直接通信的)
兄弟組件通信
兄弟組件通信即組件之間通信. 這就要用到觀察者模式了. 因?yàn)関ue實(shí)例的原型全部來自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來消息了')
}
}
})
new Vue({
el: '#app',
})
并且將兩個(gè)組件放入名為app的實(shí)例中
<div id="app"> <up></up> <down></down> </div>
按鈕被點(diǎn)擊后, up組件會(huì)接收到消息
點(diǎn)擊這里查看源代碼
以上這篇vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了Vue.js圖片預(yù)覽插件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例
這篇文章主要給大家介紹了關(guān)于vue3錨點(diǎn)定位兩種實(shí)現(xiàn)的相關(guān)資料,說到錨點(diǎn)定位,很多人第一時(shí)間會(huì)想到 a標(biāo)簽,但是a標(biāo)簽實(shí)現(xiàn)的錨點(diǎn)定位并不是那么的完美,需要的朋友可以參考下2023-07-07
Vue3+Vite實(shí)現(xiàn)一個(gè)Markdown編輯器組件
在現(xiàn)代前端開發(fā)中,Markdown 編輯器廣泛應(yīng)用于博客,文檔,Wiki,代碼注釋等場景,本文將使用 Vue 3 構(gòu)建一個(gè)簡單的 Markdown 編輯器組件,感興趣的小伙伴可以了解下2025-04-04
默認(rèn)情況下,寫在.vue組件中的樣式會(huì)全局生效,因此很容易造成組件之間的樣式?jīng)_突問題,本文就來介紹一下如何解決此問題,感興趣的可以了解一下2023-12-12
學(xué)習(xí)vue.js中class與style綁定
這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08
Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn)
這篇文章主要介紹了Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡易購物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06