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

Posted 2023-05-04

参考技术A 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 事件总线

 

 

 

 

 

 

 1.创建总线JS 

2.引入需要使用的地方，或者在main.js里面全局引入 注册

3.绑定bus.$on总线名称

4.使用总线的方法bus.$emit