Web前端最全vue 事件总线 eventbus 你学会了吗？(3)，高级web前端面试答案解析

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

件"aMsg",并携带A组件中的Msg*/

this.$EventBus.$emit(“aMsg”, this.MsgA);

}

}

};

三、接收事件

接收事件的语法：this. E v e n t B u s . EventBus. EventBus.on(监听的事件名, 回调函数)

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

{{msgB}}

B组件展示结果：

A组件中的Msg

这样，B组件就轻松接收到了A组件传递过来的参数，并成功展示了该参数，这样是不是就很简单的解决了各组件之间的通讯呢？虽然EventBus是一个很轻便的方法，任何数据都可以往里传，然后被别的组件获取，但是如果用不好，容易出现很严重的BUG，所以接下来我们就来讲解一下移除监听事件。

四、移除监听事件

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

总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次

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

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

{{msgB}}

结束语

好了，对于vue中的事件总线的讲解就到这里了，这也是我今天在做项目时用到的一个小知识点，接下来附上一张我因为没有及时移除事件监听，导致我每重进组件一次就报错48条错误信息的图，希望大家在我的文章中能血啊都一些东西，并且不要再犯我的这种低级错误。

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我的这种低级错误。

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-oDAWEx9x-1715863020155)]