Vue之全局事件总线

参考文章：
https://segmentfault.com/a/1190000019208626

一、理解

1.1、 Vue 原型对象上包含事件处理的方法

1. $on(eventName, listener): 绑定自定义事件监听
2. $emit(eventName, data): 分发自定义事件
3. $off(eventName): 解绑自定义事件监听
4. $once(eventName, listener): 绑定事件监听, 但只能处理一次

1.2、所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象

1. 所有组件对象都能看到 Vue 原型对象上的属性和方法
2. Vue.prototype.$bus=newVue(),所有的组件对象都能看到$bus 这个属性
   对象

1.3、全局事件总线

1. 包含事件处理相关方法的对象(只有一个)
2. 所有的组件都可以得到

二、实现

2.1、指定事件总线对象

new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.$globalEventBus = this
},
}).$mount('#root')

2.2、绑定事件

其中this.deleteTodo表示一个回调函数

this.$globalEventBus.$on('deleteTodo', this.deleteTodo)

2.3、分发事件

其中this.data表示要传递的数据

this.$globalEventBus.$emit('deleteTodo', this.data)

2.4、解绑事件

this.$globalEventBus.$off('deleteTodo')

三、示例

假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据

<div id="itany">
    <my-a></my-a>
    <my-b></my-b>
    <my-c></my-c>
</div>
<template id="a">
  <div>
    <h3>A组件：{{name}}</h3>
    <button @click="send">将数据发送给C组件</button>
  </div>
</template>
<template id="b">
  <div>
    <h3>B组件：{{age}}</h3>
    <button @click="send">将数组发送给C组件</button>
  </div>
</template>
<template id="c">
  <div>
    <h3>C组件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
    template: '#a',
    data() {
      return {
        name: 'tom'
      }
    },
    methods: {
      send() {
        Event.$emit('data-a', this.name);
      }
    }
}
var B = {
    template: '#b',
    data() {
      return {
        age: 20
      }
    },
    methods: {
      send() {
        Event.$emit('data-b', this.age);
      }
    }
}
var C = {
    template: '#c',
    data() {
      return {
        name: '',
        age: ""
      }
    },
    mounted() {//在模板编译完成后执行
     Event.$on('data-a',name => {
         this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
     })
     Event.$on('data-b',age => {
         this.age = age;
     })
    }
}
var vm = new Vue({
    el: '#itany',
    components: {
      'my-a': A,
      'my-b': B,
      'my-c': C
    }
});    
</script>

参考文章：
更多的组件之间通信方式参考以下文章
https://segmentfault.com/a/1190000019208626