1、初始化时全局定义
import Vue from 'vue'
// main.js 中
// 第一种定义方式
Vue.prototype.$eventBus = new Vue()
// 第二种定义方式
window.eventBus = new Vue();
2、触发事件
//使用方式一定义时
// params 多个参数
this.$eventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
eventBus.$emit('eventName', param1,param2,...)
3、监听事件
//使用方式一定义时
this.$eventBus.$on('eventName', (param1,param2,...)=>{
//需要执行 逻辑代码
// params 多个参数
})
//使用方式二定义时
eventBus.$on('eventName', (param1,param2,...)=>{
//需要执行 逻辑代码
})
4、 移除事件
在开发的过程中,我们要及时移除不使用的 eventBus ,原因:
① 为了避免在监听时,事件被反复触发
② 由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听
③ 未及时移除的 eventBus 会导致内存泄漏
//使用方式一定义时
this.$eventBus.$off('eventName');
//使用方式二定义时
eventBus.$off('eventName');