vue中的总线机制(EventBus)解析
更新时间：2022年10月13日 10:00:51 作者：燕穗子博客
这篇文章主要介绍了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销毁（常出现在路由切换时）。
优点
- 解决了多层组件之间繁琐的事件传播。
- 使用原理十分简单，代码量少。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue封装第三方插件并发布到npm的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在 Vue.js 中,组件通信是开发过程中非常重要的一部分,它涉及到不同组件之间的数据传递和交互,本文将介绍如何实现父子组件之间的有效通信,并盘点了常见的5种Vue组件通信方式总结,需要的朋友可以参考下2024-03-03
对Vue- 动态元素属性及v-bind和v-model的区别详解
今天小编就为大家分享一篇对Vue- 动态元素属性及v-bind和v-model的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue 3 + Element Plus 封装单列控制编辑的可编辑表格
在Web应用开发中实现表格数据编辑功能至关重要,本文将详细介绍如何使用Vue3和ElementPlus库来构建一个支持单列编辑的表格组件,本教程详细阐述了组件创建过程和数据绑定机制,帮助你快速掌握Vue3中表格编辑功能的实现,感兴趣的朋友一起看看吧2024-09-09
element-plus报错ResizeObserver loop limit exceeded解决办法
这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
下面小编就为大家分享一篇Vue实现active点击切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue的provide和inject使用方法及其原理,本文通过源码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
cesium开发之如何在vue项目中使用cesium,使用离线地图资源
这篇文章主要介绍了cesium开发之如何在vue项目中使用cesium,使用离线地图资源问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论