Vue之父子、同級元件的通訊詳解

在元件的通訊上vue2.0棄用1.0中dispatch和

broadcast的原因在於依賴元件樹結構的事件流，當元件樹變得很大時很難推理（簡單地說：它不能在大型應用很好地擴充套件，我們不希望以後給你設定痛點）。dispatch和broadcast不能解決同級元件之間的通訊。
2.0中有兩種方法可以完成元件直接的通訊，一種是vuex，適合大型專案的元件管理(比較複雜暫不寫，以後會詳解)。另一種是event.bus，這種方法適合不算特別複雜的元件管理，這裡詳解一下怎麼用：
新建目錄檔案–>src/components/eventBus/eventBus.js，程式碼：

import Vue from 'vue';
export default new Vue();

元件中引用：

import bus from '@/components/eventBus/eventBus';

下面介紹父元件與子元件、子元件與父元件、同級元件之間的通訊方式：
一，子元件–>父元件，傳遞引數觸發父元件的方法、子元件方法讓父元件呼叫，同級元件通訊與子元件–>父元件用法的方法一致。
1，子元件中傳遞引數觸發父元件方法，可以將當前屬性當做引數傳到父元件，比如傳當前的元素element：
（1）首先由子元件觸發當前元素：
子元件children模板：

<div @cart-add="cartAdd"></div>

子元件js：

import bus from '@/components/eventBus/eventBus';
export default {
  cartAdd () {
    bus.$emit('cart-add', event.target);
  }
};

（2）父元件parent模板在鉤子函式中接收屬性
父元件模板：

<div>
  <children @cart-add="cartAdd"></children>
</div>

父元件js：

import bus from '@/components/eventBus/eventBus';
export default {
  created () {
   bus.$on('cart-add', (el) => {});
 }
};

2，子元件方法讓父元件呼叫
這裡借用ref、refs的方法，子元件js：

export default {
  methods: {
   drop () {
   }
 }
};

父元件模板：

<div>
  <div @click="btn"></div>
  <children ref=cartAdd></children>
</div>

父元件js：

export default {
  methods: {
   btn () {
     this.$refs.cartAdd.drop();
   }
 }
};

二，父元件–>子元件傳值

父元件模板中繫結引數：

<div>
  <children :parentData="datas"></children>
</div>

子元件接收資料,在模板中就可以呼叫父元件裡的資料
子元件模板：

<div>{{parentData.name}}</div>

export default {
  props: {
     parentData: {
      type: Object    
    }
  }
};

三、兄弟元件通訊
與子元件–>父元件的傳遞引數觸發方法一致，在children1中emit傳遞屬性，在children2中

on接收屬性觸發方法。