詳解Vue2中組件間通信的解決全方案
前言
在Vue中組件是實(shí)現(xiàn)模塊化開(kāi)發(fā)的主要內(nèi)容，而組件的通信更是vue數(shù)據(jù)驅(qū)動(dòng)的靈魂，下面這篇文章將給大家介紹關(guān)于Vue2組件間通信的相關(guān)內(nèi)容，下面話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹。
組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統(tǒng)構(gòu)建中，組件間通信必不可少的。
父組件--> 子組件
1. 屬性設(shè)置
父組件關(guān)鍵代碼如下：
<template> <Child :child-msg="msg"></Child> </template>
子組件關(guān)鍵代碼如下：
export default {
name: 'child',
props: {
child-msg: String
}
};
child-msg 為父組件給子組件設(shè)置的額外屬性值，屬性值需在子組件中設(shè)置props，子組件中可直接使用child-msg變量。
2. 子組件調(diào)用父組件
子組件通過(guò) $parent 獲得父組件，通過(guò) $root 獲得最上層的組件。
子組件--> 父組件
1. 發(fā)送事件/監(jiān)聽(tīng)事件
子組件中某函數(shù)內(nèi)發(fā)送事件：
this.$emit('toparentevent', 'data');
父組件監(jiān)聽(tīng)事件：
<Child :msg="msg" @toparentevent="todo()"></Child>
toparentevent 為子組件自定義發(fā)送事件名稱，父組件中@toparentevent為監(jiān)聽(tīng)事件，todo為父組件處理方法。
2. 父組件直接獲取子組件屬性或方法
給要調(diào)用的子組件起個(gè)名字。將名字設(shè)置為子組件 ref 屬性的值。
<!-- 子組件。 ref的值是組件引用的名稱 --> <child-component ref="aName"></child-component>
父組件中通過(guò) $refs.組件名 來(lái)獲得子組件，也就可以調(diào)用子組件的屬性和方法了。
var child = this.$refs.aName child.屬性 child.方法()
父組件通過(guò) $children 可以獲得所有直接子組件（父組件的子組件的子組件不是直接子組件）。需要注意 $children 并不保證順序，也不是響應(yīng)式的。
Bus中央通信
目前中央通信是解決兄弟間通信，祖父祖孫間通信的最佳方法，不僅限于此，也可以解決父組件子組件間的相互通信。如下圖：
各組件可自己定義好組件內(nèi)接收外部組件的消息事件即可，不用理會(huì)是哪個(gè)組件發(fā)過(guò)來(lái)；而對(duì)于發(fā)送事件的組件，亦不用理會(huì)這個(gè)事件到底怎么發(fā)送給我需要發(fā)送的組件。
先設(shè)置Bus
//bus.js import Vue from 'vue' export default new Vue();
組件內(nèi)監(jiān)聽(tīng)事件：
import bus from '@/bus';
export default {
name: 'childa',
methods: {
},
created() {
bus.$on('childa-message', function(data) {
console.log('I get it');
});
}
};
發(fā)送事件的組件：
import bus from '@/bus';
//方法內(nèi)執(zhí)行下面動(dòng)作
bus.$emit('childa-message', this.data);
Bus中央通信的方案各種情況下都可用，比較方便，具體內(nèi)在原理后續(xù)更新說(shuō)明。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者使用vue能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue3父子組件傳值?雙向綁定及注意問(wèn)題小結(jié)
這篇文章主要介紹了Vue3中如何通過(guò)v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
以簡(jiǎn)單的樹(shù)形組件為案例,實(shí)現(xiàn)在組件中遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)遞歸組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)簡(jiǎn)單學(xué)生信息管理
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單學(xué)生信息管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
最近聽(tīng)到有人提到了Vue2的functional組件,大致上是說(shuō)這個(gè)東西沒(méi)有生命周期,在渲染層面上,會(huì)減少很多的消耗,一番處理之后,首屏?xí)r間和內(nèi)存都能減少不少,所以本文小編就來(lái)和大家聊聊Vue2中的functional組件<BR>2023-08-08
vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之給組件綁定原生事件操作,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件綁定原生事件相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue3項(xiàng)目如何國(guó)際化實(shí)戰(zhàn)指南
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國(guó)際化的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue之讀取并解析ini文件中的內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
通過(guò)vue寫一個(gè)瀑布流插件代碼實(shí)例
這篇文章主要介紹了通過(guò)vue寫一個(gè)瀑布流插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
本文主要介紹了vue拖拽添加的簡(jiǎn)單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要是來(lái)和大家一起討論一下Vue2與Vue3中響應(yīng)式的原理，文中的相關(guān)示例代碼簡(jiǎn)潔易懂，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考下2023-07-07