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

前言vue组件中最常见的数据传输就是父子组件之间的传输。Parenttochild通过props将数据向下传递给子组件；childtoparent通过$emit发送事件，携带数据给父组件。而且有时两个组件之间没有任何关系，或者它们之间的结构很复杂，如何传递数据？这时候就需要用到vue中EventBus的概念了。[数据结构与算法完整代码],[前端技术交流群]文EventBus介绍EventBus，又称事件总线，相当于一个全局仓库。任何组件都可以去这个仓库获取事件，如图：EventBus的使用废话不多说，直接开始使用EventBus。1.使用EventBus进行初始化，首先要初始化一个EventBus，这里称之为全局事件总线。第一种初始化方法importVuefrom'vue'//因为是全局的'仓库'，所以初始化要全局初始化constEventBus=newVue()第二种初始化方法（本文用的就是这种初始化方法）//在已经创建的Vue实例的原型中创建一个EventBusVue.prototype.$EventBus=newVue()。2、向EventBus发送事件发送事件的语法：this.$EventBus.$emit(senteventname,passedparameters)EventBus创建完成后，我们需要将需要传递的事件发送给它，这样其他组件可以从EventBus中获取。示例：有两个组件A和B需要通信。它们不是父子组件关系。B事件需要获取A事件中的一组数据data3.接收事件接收事件语法：this.$EventBus.$on(监听事件名称,回调函数)A组件向全局事件总线EventBus发送了一个aMsg事件，B组件就可以去aMsg收听此事件并获取一些数据。B组件显示结果：A组件中的Msg是这样的，B组件很容易接收到A组件传过来的参数，并成功显示参数，所以解决起来很简单组件之间的通信？EventBus虽然是一种很方便的方式，可以传入任何数据，然后由其他组件获取，但是如果使用不当，很容易出现严重的bug，下面就来讲解一下监听事件的去除。4、去掉监听事件在前面的例子中，我们的A组件向事件总线发送了一个事件aMsg，并传递了参数MsgA，然后B组件监听了该事件，并获取了传递过来的参数。但是，如果此时我们离开B组件，然后再次进入B组件，就会再次触发事件aMsg的监听。此时，时间总线上有两个监视器。如果我们重复多次进入B组件，那么它会多次MonitoraMsg。总而言之，组件A只是向EventBus发送一个事件，而组件B却监听了多次。EventBus容器中有很多相同的事件监听器。事件只触发了一次，但是监听事件中的回调函数已经执行了很多次。解决方法：在组件离开之前，也就是销毁之前，移除监听事件，以免下次重复创建监听事件语法：this.$EventBus.$off(要移除的事件名称)结束语好了，vue中事件总线的讲解到此结束，这是我今天做项目的时候用到的一个小知识点，然后附上一张48错误信息的图片，每次重新进入组件都是因为没有及时去掉事件监视器。希望大家能在我的文章中有所收获。并且不要再犯我的低级错误。