組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統構建中，組件間通信必不可少的。

父組件--> 子組件

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組件之間的通信， 父子組件通信，兄弟組件通信