1. eventbus 的简介
eventbus又称为事件总线, 在vue中可以使用eventbus来作为沟通桥梁的概念, 是所有组件所共有的事件中心.可以向该中心注册发送事件或接收事件.所以组件都可以上下平行地通知其他组件
2. 如何使用eventbus
(1) 初始化
首先需要创建事件总线并将其导出,以便其他模块可以使用或者监听它,有两种方式处理
第一种,新建一个js文件,比如event-bus.js
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()实际上eventbus是一个不具备dom的组件
另外一种方式,可以直接在项目中的main.js初始化EventBus:
// main.js
Vue.prototype.$EventBus = new Vue()
// 注意这种方式初始化的EventBus是一个全局事件总线, (2) 发送事件
假设有两个vue页面需要通信, A页面在按钮上面绑定了点击事件,发送一则消息,通知B页面
// A 页面
接下来在B页面接收消息
(3) 接收事件
{{msg}}
前面提过,如果使用不善,eventBus会是一个灾难, vue是单页面应用,如果你再某一个页面刷新之后,与之相关的eventbus将会被移除, 这样会导致业务走不下去. 还有就是如果业务有反复操作的页面, eventBus在监听的时候就会触发很多次, 也是一个非常大的隐患. 这时候我们需要好好处理eventbus在项目中的关系, 通常是在vue页面销毁的时候,同事移除eventbus事件监听
移除事件监听
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})你可是要EventBus.$off('eqwe')移除应用内所有对此某个事件的监听, 或者直接调用EventBus.$off() 来移除所有事件频道.不添加任何参数~~~~
3. 全局eventbus
它的工作原理是发布/订阅方法, 通常称为pub/sub
创建全局EventBus
// 1. 创建bus.js文件 **src/service/bus.js**
const install = (Vue) => {
const Bus = new Vue({
methods: {
on (event, ...args) {
this.$on(event, ...args);
},
emit (event, callback) {
this.$emit(event, callback);
},
off (event, callback) {
this.$off(event, callback);
}
}
})
Vue.prototype.$bus = Bus;
}
export default install;
// **maix.js文件中引入**
import Bus from "@/service/bus";
Vue.use(Bus);
// **组件中使用**
this.$bus.on('Config_forms',(data)=>{ }) //绑定事件
this.$bus.emit('Config_forms',data) //触发该方法 this.$bus.off('Config_forms') //解绑事件