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

官方在廢除的同時(shí)，也為我們提供了替換方案，包括實(shí)例化一個(gè)空的vue實(shí)例，使用$emit反應(yīng)子組件上的狀態(tài)變化

1.使用$emit觸發(fā)事件

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

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

在父組件中 helloWorld.vue 中

< template/>

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

script

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

然后，在子組件 configBox.vue 中，主要在任意事件回調(diào)中,使用 $emit來(lái)觸發(fā)自定義的 listenToConfig事件，后面還可以加上參數(shù)傳給父組件。比如，在子組件彈窗上點(diǎn)擊×關(guān)閉時(shí)，通知父組件 helloWorld.vue我要關(guān)閉了，主要方便父組件改變相應(yīng)狀態(tài)變量，并傳入false到自定義的事件中。

script

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

在子