前言
在Vue中組件是實現模塊化開發的主要內容，而組件的通信更是vue數據驅動的靈魂，下面這篇文章將給大家介紹關于Vue2組件間通信的相關內容，下面話不多說，來一起看看詳細的介紹。
組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統構建中，組件間通信必不可少的。
父組件--> 子組件
1. 屬性設置
父組件關鍵代碼如下：
<template> <Child :child-msg="msg"></Child> </template>
子組件關鍵代碼如下：
export default {
name: 'child',
props: {
child-msg: String
}
};
child-msg 為父組件給子組件設置的額外屬性值，屬性值需在子組件中設置props，子組件中可直接使用child-msg變量。
2. 子組件調用父組件
子組件通過 $parent 獲得父組件，通過 $root 獲得最上層的組件。
子組件--> 父組件
1. 發送事件/監聽事件
子組件中某函數內發送事件：
this.$emit('toparentevent', 'data');
父組件監聽事件：
<Child :msg="msg" @toparentevent="todo()"></Child>
toparentevent 為子組件自定義發送事件名稱，父組件中@toparentevent為監聽事件，todo為父組件處理方法。
2. 父組件直接獲取子組件屬性或方法
給要調用的子組件起個名字。將名字設置為子組件 ref 屬性的值。
<!-- 子組件。 ref的值是組件引用的名稱 --> <child-component ref="aName"></child-component>
父組件中通過 $refs.組件名 來獲得子組件，也就可以調用子組件的屬性和方法了。
var child = this.$refs.aName child.屬性 child.方法()
父組件通過 $children 可以獲得所有直接子組件（父組件的子組件的子組件不是直接子組件）。需要注意 $children 并不保證順序，也不是響應式的。
Bus中央通信
目前中央通信是解決兄弟間通信，祖父祖孫間通信的最佳方法，不僅限于此，也可以解決父組件子組件間的相互通信。如下圖：
各組件可自己定義好組件內接收外部組件的消息事件即可，不用理會是哪個組件發過來；而對于發送事件的組件，亦不用理會這個事件到底怎么發送給我需要發送的組件。
先設置Bus
//bus.js import Vue from 'vue' export default new Vue();
組件內監聽事件：
import bus from '@/bus';
export default {
name: 'childa',
methods: {
},
created() {
bus.$on('childa-message', function(data) {
console.log('I get it');
});
}
};
發送事件的組件：
import bus from '@/bus';
//方法內執行下面動作
bus.$emit('childa-message', this.data);
Bus中央通信的方案各種情況下都可用，比較方便，具體內在原理后續更新說明。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者使用vue能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
