從vue1.x過來的都知道，在vue2.0中，父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結構擴展的過程中會變得越來越脆落。特別是在組件層級比較深的情況下。通過廣播和事件分發的機制，就顯得比較混亂了。

官方在廢除的同時，也為我們提供了替換方案，包括實例化一個空的vue實例，使用$emit反應子組件上的狀態變化

1.使用$emit觸發事件

helloWorld.vue作為父組件，dialogConfigVisible變量控制子組件彈框顯示或隱藏。

configBox.vue作為子組件，假設為封裝的公告彈窗。

在父組件中 helloWorld.vue 中

< template/>

  <config-box   :visible="dialogConfigVisible"           @listenToConfig="changeConfigVisible" > </config-box>

script

 data(){  return {   dialogConfigVisible:true  } }  methods: {   changeConfigVisible(flag) {     this.dialogConfigVisible = flag;   }  }

然后，在子組件 configBox.vue 中，主要在任意事件回調中,使用 $emit來觸發自定義的 listenToConfig事件，后面還可以加上參數傳給父組件。比如，在子組件彈窗上點擊×關閉時，通知父組件 helloWorld.vue我要關閉了，主要方便父組件改變相應狀態變量，并傳入false到自定義的事件中。

script

methods:{ dialogClose() {  this.show = false;  this.$emit("listenToConfig", false) }}

在子組件中，主動觸發listenToConfig事件，并傳入參數 false, 告訴父組件 helloWorld.vue對話框要關閉了。這里就可以避免父組件中的狀態未變化，再次刷新頁面的時候對話框會自動出現。

2.實例化一個空的vue實例bus

這里實例化一個bus 空vue實例，主要為了統一管理子組件和父組件相互通信，通過bus 作為媒介，首先新建一個bus.js 文件，在里面新建一個對象，父組件為table.vue， 子組件為tableColumn.vue

 // bus.js import Vue from "vue"; export var bus = new Vue({   data:{    scrollY:false   },   methods:{    updateScrollY(flag){     this.scrollY = flag;    }   }  })

然后分別引入：

 // table.vue <script> import {bus} from "./bus"  export default {   created(){    bus.$on('getData',(argsData)=>{     // 這里獲取子組件傳來的參數     console.log(argsData);     })   }  } </script>

 // tableColumn.vue <script>  import {bus} from "./bus"  export default{   methods(){    handleClick(){     bus.$emit('getData',{data:"from tableColumn!"})    }   }  } </script>

上面的父子組件中，父組件中利用bus注冊監聽事件getData,子組件中一旦有狀態變化，就觸發bus上對應的事件。