vue中的总线机制(EventBus)解析
作者:燕穗子博客
这篇文章主要介绍了vue中的总线机制(EventBus),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
一、EventBus的简介
EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据。
二、使用方法
第一步:2种方式初始化
在项目中使用事件总线时,需要初始化一条总线,初始化的方式有两种
第一种:通过 .js 文件将总线作为模块化导入
// EventBus.js import Vue from 'vue' export defalut new Vue()
第二种:通过 prototype 将总线注册为全局总线,直接在main.js中初始化以下代码(推荐使用)
//main.js Vue.prototype.bus = new Vue(); new Vue({ render: h => h(App) ... }).$mount('#app'); /* *通过把一个vue实例赋于Vue构造函数原型上的一个属性bus(当然起任何名称都是可以的) *而每个Vue实例都是有$emit和$on方法的 *由于bus属性在Vue原型上,根据原型链查找规则,在页面中我们就可以通过 this.bus.$emit 和 *this.bus.$on来进行跨组件通信了 */
第二步:发送事件
在组件中引入总线文件 ,使用 EventBus.$emit(‘事件名称’,数据)进行发送数据
//导航栏组件中 //点击事件发生时发布一个事件 this.bus.$emit('even-name',args1, arg2 , ...) //这里我们可以把点击导航的相关信息携带出去
第三步:接受事件
在组件中引入总线文件 ,使用 EventBus.$on(‘emit事件名’,callback(payload1...))进行接受事件
在一个组件中某事件如果只监听一次的话,可以使用 EventBus.$once('事件名称',callBack(payload1...));
//路由显示页面中 this.bus.$on('event-name', (...args) => { //根据参数来进行路由跳转 })
第四步:移除事件
EventBus.$off('事件名', callback),只移除这个回调的监听器。 EventBus.$off('事件名'),移除该事件所有的监听器。 EventBus.$off(), 移除所有的事件监听器,注意不需要添加任何参数。 EventBus.$off('XXXXX', {}) // 移除指定事件 EventBus.$off('XXXXX') // 移除应用内所有对此事件的监听 EventBus.$off() // 移除应用内所有事件的监听
三、全局EventBus
1、注册,在main.js中
Vue.prototype.$bus = new Vue();
2、在组件中使用
this.$bus.$on("sendMessage" , (msg) => { _this.message = msg }) this.$bus.$emit("sendMessage" , "这是从D组件中传递到兄弟组件的内容")
四、EventBus的优缺点
缺点
- vue作为单页面应用,如果在某一个页面刷新了之后,与之相关的EventBus会被移除。
- 如果业务有反复操作的页面,EventBus在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus事件监听。
- 由于是都使用一个Vue实例,所以容易出现重复触发的情景,两个页面都定义了同一个事件名,并且没有用$off销毁(常出现在路由切换时)。
优点
- 解决了多层组件之间繁琐的事件传播。
- 使用原理十分简单,代码量少。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。