生活
eventbus 、EventBus2X
2023-04-16 01:21  浏览:43

Vue事件总线(EventBus)

(EventBus)可以称之为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信。vue事件总线就像所有组件的事件中心,在组件中,我们可以使用 $emit , $on , $off 分别来分发、监听、取消监听事件。

2.在组件中基于全局事件总线中发送和监听事件

vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus会被移除,这样就导致业务走不下去。还有就是如果业务有反复操作的页面,EventBus 在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理 EventBus 在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus 事件监听。

EventBus.$off() -----------移除当前组件的所有事件监听者

EventBus.$off(param:string) ------------移除当前组件对某个事件的所有监听

EventBus.$off(param:string,param) -------移除某个方法对某个事件的监听如: this.addTodo

vue 事件总线EventBus的概念、使用以及注意点

EventBus 又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件

废话不多说,直接开始使用 EventBus

要用 EventBus ,首先要初始化一个 EventBus ,这里称它为全局事件总线。

发送事件的语法: this.$EventBus.$emit(发送的事件名,传递的参数)

已经创建好 EventBus 后我们就需要向它发送需要传递的事件,以便其他组件可以向 EventBus 获取

例子:有两个组件A和B需要通信,他们不是父子组件关系, B 事件需要获得 A 事件里的一组数据 data

接收事件的语法: this.$EventBus.$on(监听的事件名, 回调函数)

A 组件已经向全局事件总线 EventBus 发送了一个 aMsg 事件,这时B组件就可以去aMsg监听这个事件,并可以获得一些数据。

B组件展示结果:

在上一个例子中,我们A组件向事件总线发送了一个事件 aMsg 并传递了参数 MsgA ,然后 B 组件对该事件进行了监听,并获取了传递过来的参数。但是,这时如果我们离开 B 组件,然后再次进入B组件时,又会触发一次对事件 aMsg 的监听,这时时间总线里就有两个监听了,如果反复进入 B 组件多次,那么就会对 aMsg 进行多次的监听。

1.解决办法:在组件离开,也就是被销毁前,将该监听事件给移除,以免下次再重复创建监听

2.语法: this.$EventBus.$off(要移除监听的事件名)

Vue中组件通信(eventBus)

在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。

eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。

使用方式:

1、初始化——全局定义

全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

2、监听事件

3、触发事件

4、移除监听事件

为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。

Vue中 事件总线(eventBus)使用

在Vue中如果两个页面组件中没有任何引入和被引入关系,该如何通信呢?首先可能会想到是Vuex ,但是如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信。

eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。由于太方便如若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的 Vuex 作为状态管理中心,将通知的概念上升到共享状态层次。

A组件已经向全局事件总线EventBus发送了一个aMsg事件,这时B组件就可以去aMsg监听这个事件,并可以获得一些数据。

eventBus 适合小项目、数据被更少组件使用的项目,对于中大型项目数据在很多组件之间使用的情况 eventBus 就不太适用了。eventBus 其实就是一个发布订阅模式,利用 Vue 的自定义事件机制,在触发的地方通过 $emit 向全局Bus外发布一个事件,在需要监听的页面,通过 $on 监听事件。最后在组件销毁时,需要通过 $off 将事件移除监听

EventBus实现原理

真传 一句话 假传万卷书;

三板斧:

***板斧,初始化各种内存信息;

第二板斧,在register的时候把订阅信息交给eventBus管理,通过对象相应的注解得到要调用的方法缓存起来;

即 eventBus.register(new EventSubscrib())做的事情;(注解的本质就是标签,通过标签找到方法)

第三板斧,调post的时候拿到我们缓存的类及方法,直接通过invoke调用订阅者的方法;也就完成了订阅者的调用;

eventbus的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于EventBus2X、eventbus的信息别忘了在本站进行查找喔。

发表评论
0评