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(), 移除所有的事件频道

上一篇:兄弟组件传值


下一篇:Android面试必问!2021年BATJ30套大厂Android经典高频面试题,完整版开放下载