vue2.0 $emit $on組件通信

在vue1.0中父子組件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已經被棄用。

因為基於組件樹結構的事件流方式實在是讓人難以理解，並且在組件結構擴展的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以后讓開發者們太痛苦。並且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通信問題。

復雜項目中狀態管理可以用vuex,簡單父子組件通信可以用$emit事件廣播,用$on接收事件信息

子組件:

// 子組件
<template>
 <div @click="changeData(1)">點擊改變數據</div>
</template>
<script>
  data () {
   return {
    type: 0,
  },
  methods: {
    changeData (type) {
      this.type = type
      this.$emit('change-type', type)
   }
  }
</script>

父組件:

//父組件
<template>
  <typetemplate @change-type="changeType"></typetemplate>
</template>
<script>
  data () {
   return {
    selectType: 0,
  },
  methods: {
   changeType (type) {
    this.type = type
   }
  },
  components: {
　　typetemplate
　}
</script>

@change-type 是v-on:change-type簡寫。

以上是 子組件與父組件 通信,跨級組件通信以及兄弟組件通信一樣可以使用$emit $on。 因為 Vue 通過事件發射器接口執行實例，實際上你可以使用一個空的 Vue 實例。
var eventHub = new Vue(); // 這個空實例只做通信輔助用,可以理解為一個事件處理中心。
任意組件A:

eventHub.$emit('add',1);

任意組件B:

event.$on('add',(n) => {
　　this.num += n;
});

另外,一個簡單的方法,可以在實例化Vue時,就在data塞入一個new Vue() 

new Vue({
  router: router,
  template: '<App/>',
  components: {App},
  data: {
    eventHub: new Vue()
  }
}).$mount('#app');

這樣在其他地直接可以 this.$root.eventHub 訪問到這個空實例
廣播接收方法就直接可以用了:

// this.$root.eventHub 獲取eventHub對象並調用$emit方法
this.$root.eventHub.$emit('add', 1);

其他組件可以調用$on或$off 來監聽或解除廣播事件

this.$root.eventHub.$on('add', (n)=>{
    this.num += n;
});