vue2.x中组件间事件的派发与接收

在项目开发过程中，我们可能会需要在两个组件间进行事件的通信。

一、在vue1.x中

使用broadcast进行通信。示例如下：

/* child.vue */

this.$dispatch('eventName', this.data);

/* parent.vue */
event: {
    'eventName': function(data) {
        ...
    }
}

但在vue2.x已被弃用。官方文档解释如下：

因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且broadcast 也没有解决兄弟组件间的通信问题。

二、在vue2.x中

官方给出的最简单的升级建议，是使用集中的事件处理器，而且也明确说明一个空的vue实例就可以做到，因为vue实例实现了一个事件分发接口。示例如下：
main.js：

new Vue({
  el: '#app',
  router,
  data: {
    eventHub: new Vue()
  }
})

某一个组件内调用事件触发：

this.$root.eventHub.$emit('eventName', data);

另一个组件内调用事件接收，在组件销毁时解除事件绑定，使用$off方法：

created() {
  this.$root.eventHub.$on('eventName', (data) => {
    // do something
  });
}

然后就搞定啦！