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