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中央通訊的方案各類狀況下均可用，比較方便，具體內在原理後續更新說明。