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;
});