首页IT科技vue的事件机制(vue中的总线机制(EventBus)解析)

vue的事件机制(vue中的总线机制(EventBus)解析)

时间2025-06-14 23:40:58分类IT科技浏览8336
导读:一、EventBus的简介 EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,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销毁(常出现在路由切换时)                  。

优点

解决了多层组件之间繁琐的事件传播。 使用原理十分简单                          ,代码量少                         。

以上为个人经验                          ,希望能给大家一个参考,也希望大家多多支持本站                          。

声明:本站所有文章                 ,如无特殊说明或标注                          ,均为本站原创发布。任何个人或组织         ,在未征得本站同意时                 ,禁止复制        、盗用                         、采集                  、发布本站内容到任何网站、书籍等各类媒体平台                 。如若本站内容侵犯了原著者的合法权益                          ,可联系我们进行处理                          。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
seo站内优化做些什么图(SEO站内优化的时间与技巧) 网络用语的正确使用(解析SEO策略,带你探究网络用语的奥秘)