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

最新推荐文章于 2024-05-15 10:00:00 发布
最新推荐文章于 2024-05-15 10:00:00 发布
阅读量438 收藏 9
点赞数 3
分类专栏： 程序员 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84093899/article/details/137473436
版权
本文介绍了在Vue.js中，非父子组件间的通信如何通过EventBus实现，包括发送事件、接收事件、移除监听的步骤。同时也强调了合理使用EventBus以避免性能问题，并提到了前端开发者的学习资源和面试准备的重要性。
摘要由CSDN通过智能技术生成

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

<button @click=“sendMsg”>发送MsgA

三、接收事件

接收事件的语法：this.$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}}

结束语

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取

前端面试题宝典

前端校招面试题详解

知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取

[外链图片转存中…(img-5EQhe80n-1712485598660)]

[外链图片转存中…(img-AFFWEAyu-1712485598660)]

[外链图片转存中…(img-l8mE0ked-1712485598660)]

2401_84093899
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue事件总线（eventBus）的使用
weixin_43930421的博客
06-01 432
钉钉
在Uni中使用Vue的EventBus总线机制操作
10-15
在Vue开发中，有时我们需要在不直接存在父子或兄弟关系的组件之间传递数据，这时可以利用EventBus（事件总线）这一技术。EventBus是一种轻量级的通信方式，它基于Vue实例，允许我们在不同组件之间共享数据和触发事件...
vue之事件总线
Jack, what else can you do besides holding your little darling?
10-25 363
1.事件总线介绍 在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。 2.事件总线原理 事件总线可以用一个对象来表示每一个事件 都有一个数组来记录这个事件的监听者 { "event1": [hander1, hander2], "event2": [hander1, hander2, hander3], } 1，若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去 2，若给某个事
vue组件通信必知必会——事件总线Event Bus
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-15 1037
主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。
Vue.js事件总线（EventBus）
大灰狼的小绵羊哥哥的博客
10-02 7009
许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。 父子组件通讯原则 为了提高组...
Vue中的事件总线
aYao__的博客
03-06 809
事件总线是为方便vue中组件之间的通信而出现的 核心原理： VueComponent.prototype.__proto__ === Vue.prototype 通俗来讲就是组件vc的实例对象可以访问到Vue原型对象上的方法，因此可以在vue原型对象上创建一个对象，这样所有的组件实例vc都能访问该对象从而实现组件间通信 创建事件总线： new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = t
Vue事件总线（EventBus）使用
weixin_52976120的博客
02-14 155
【代码】Vue事件总线（EventBus）使用。
详解vue 组件之间使用eventbus传值
08-29
Vue 组件之间使用 EventBus 传值 在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个...
Vue EventBus自定义组件事件传递
08-27
`EventBus`是一种轻量级的事件总线，它其实就是一个新的Vue实例。通过这个实例，我们可以发布（$emit）和订阅（$on）事件，从而在不直接依赖父组件或子组件关系的情况下，实现组件间的通信。这在处理非父子组件之间...
vue 使用eventBus实现同级组件的通讯
08-27
Vue 使用 EventBus 实现同级组件的通讯 Vue.js 是一个流行的前端框架，它提供了多种方式来实现组件之间的通讯，其中之一就是使用 EventBus。EventBus 是一个中央事件总线，允许组件之间相互通讯。今天，我们将学习...
Vue事件总线（EventBus）的使用
小太阳的博客
05-11 743
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 但是两个页面没有任何引入与被引入关系，该怎么通信呢？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。 EventBus的使用 1.初始化（有两种方式），首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。 （1）新创建一个 .j
Vue 自定义事件实现子组件给父组件传递数据
m0_50163856的博客
02-11 433
定义自定义事件 <template> <div id="app"> <!-- *自定义事件定义方式一 func是自定义事件名， getData为事件的回调 --> <PropsDemo @func="getData"></PropsDemo> <!-- *自定义事件定义方式二 --&g
vue事件总线怎么使用（子组件与子组件之间的通信）
zhuxichong123的博客
04-25 309
总结：Vue事件总线可以用于父子组件之间、兄弟组件之间、跨级组件之间等场景的通信。但由于它是全局对象，所以在复杂的应用中可能会导致事件冲突或难以追踪问题。因此，在使用事件总线时，建议仅在必要情况下使用，并且注意事件命名和解绑。Vue事件总线是一种通信机制，它允许在Vue组件之间进行事件传递和处理。1.在main.js注册。
HTML/CSS/学习(一)
qq_43239161的博客
09-09 119
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaSc...
Vue事件总线（EventBus）使用详细介绍
weixin_59395272的博客
06-21 209
来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。的使用方法，是不是很简单。
Vue-全局事件总线_vue 全局事件总线，2024年最新被面试的公司拒绝了,还能再去要求面试吗
m0_60635245的博客
04-18 624
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
Vue事件总线（EventBus）使用指南：详细解析与实战应用
热门推荐
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
vue eventBus 的使用
07-22
在 Vue 中，你可以使用事件总线（Event Bus）来实现组件之间的通信。事件总线是一个空的 Vue 实例，可以用于触发和监听自定义事件。 首先，在你的项目中创建一个新的 Vue 实例作为事件总线： ```javascript // eventBus.js import Vue from 'vue'; export const eventBus = new Vue(); ``` 然后，在需要通信的组件中，你可以使用事件总线来触发事件或监听事件： ```javascript // ComponentA.vue import { eventBus } from './eventBus.js'; export default { methods: { sendMessage() { eventBus.$emit('message', 'Hello from Component A!'); } } } ``` ```javascript // ComponentB.vue import { eventBus } from './eventBus.js'; export default { data() { return { receivedMessage: '' }; }, mounted() { eventBus.$on('message', (message) => { this.receivedMessage = message; }); } } ``` 在上面的示例中，ComponentA 在方法中通过 `eventBus.$emit` 触发了名为 `message` 的自定义事件，并传递了消息内容。而 ComponentB 在 `mounted` 钩子函数中通过 `eventBus.$on` 监听了 `message` 事件，当事件触发时会执行回调函数并将消息内容赋值给 `receivedMessage`。 这样，ComponentA 和 ComponentB 之间就可以通过事件总线进行通信了。请确保在不需要通信时及时销毁事件监听，以避免内存泄漏。 注意：事件总线在组件之间是全局共享的，可以用于任意组件之间的通信。但是如果你的项目越来越复杂，建议考虑使用更好的状态管理方案，如 Vuex。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值