Vue事件总线(EventBus)

简介

  EventBus 又称为事件总线，在vue中可以使用 EventBus 来作为沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件可以上下平行的通知其它组件，主要用于兄弟组件或者两个页面(组件)之间没有任何的引入和被引入的关系。但是需要谨慎使用。

使用

 一、初始化

• 创建事件总线并将其导出

// vue 的事件总线
import Vue from "vue";
let EventBus = new Vue();
export default EventBus;

• 本质上它是一个不具备DOM结构的组件，仅仅是有它的实例方法而已。

• 另一种初始化的方式是在 main.js 中
  Vue.prototype.$EventBus = new Vue()

 二、发送事件

• 使用 EventBus.$emit(channel: string,callback(payload,...))

EventBus.$emit("redpackmsg",{packid:obj.content.id,contest_type:obj.content.contest_type});

 三、接受事件

• 使用 EventBus.$on(channel: string,callback(payload,...))

EventBus.$on("redpackmsg",(obj)=>{
  this.chaildpackid = obj.packid;
  this.contest_type = obj.contest_type;
})

 四、移除事件监听

• 使用 EventBus.$off(channel: string,{})，参数为可选的。

  beforeDestroy(){
    EventBus.$off("redpackmsg",{});
  }

• EventBus.$off(channel: string)，移除应用所有对此事件的监听

• EventBus.$off()， 移除所有的事件频道

 五、注意事项

• 如果不移除事件监听，如果反复进入到创建事件监听的页面时，之前的监听事件仍保留着，就会造成事件可能触发多次的现象，从而会产生一些bug。