Vue EventBus事件总线

在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件

使用

1 初始化 创建 js文件

import Vue from 'vue'
var Event = new Vue();

export default Event;

2 发送事件

//引入 Eevent 模块
import Event from '../../public/event'
Event.$emit('Component1','msg')

3.接收

//引入 Eevent 模块
import Event from '../../public/event'
Event.$on('Component1',(v)=>{
      console.log(v);
    })

实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

全局

在 main.js 中添加

//全局事件总线，创建一个vue实例，挂载到根实例
  const Event = new Vue()
Vue.prototype.Event = Event;

// 发送
 this.Event.$emit('Component2','我是组件2的数据')
// 接收
this.Event.$on('Component2',function(item){
      console.log(item);
    })

EventBus 问题

vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
EventBus.$off(‘Component1’)来移除应用内所有对此某个事件的监听EventBus.$off() 来移除所有事件频道，不需要添加任何参数