Vue的事件总线

原本存在直接相关的父子组件之间进行数据的交互，但是对于组件之间没有直接的，如何进行数据交互呢?

事件总线和Vuex的区别在于：Vuex是对状态进行管理的而事件总线是对事件进行管理的。

提供了一个全局事件中心，并将其注如每个组件中，像内置的事件流一样方便的使用全局事件

工作原理就是使用发布/订阅方式

1.事件总线的创建

import Vue from 'vue'
export const EventBus = new Vue()　

创建一个全局的事件总线

// main.js
Vue.prototype.$EventBus = new Vue()

2.发送消息

EventBus.$emit("aMsg", '来自A页面的消息'); //A发送消息给B

3.监听接收消息

EventBus.$on("aMsg", (msg) => {// A发送来的消息
　　this.msg = msg; //B监听接收到A的消息就是msg数据
 });

4.移除事件

EventBus.$off('aMsg', {})

 

在Vue项目中创建一个EventBus,事件总线

var EventBus = new Vue(); //事件总线据是一个全局的原型对象中的属性对象
 
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

this.$bus.$emit('nameOfEvent', { ... pass some event data ...}); //调用原型属性进行数据发送和监听
 
this.$bus.$on('nameOfEvent',($event) => {
  // ...
})