Vue 中央事件总线的坑

已于 2022-07-18 10:10:09 修改
阅读量1.8k 收藏 5
点赞数 4
分类专栏： Web FrontEnd Vue
于 2019-09-04 11:00:08 首次发布
_格鲁特宝宝原创，转载请务必注明出处
本文链接：https://blog.csdn.net/GrootBaby/article/details/100534589
版权
本文详细探讨了使用Vue中央事件总线时遇到的两个问题：1) 第一次触发时页面B的on事件未被触发，原因是页面B还未创建；2) 后续触发事件导致执行次数增多，由于$on事件不会自动清除。解决办法包括将A页面的emit事件放在beforeDestroy中，以及在B页面添加Bus.$off来关闭事件监听。在使用事件总线传递数据时，应注意组件A的事件触发时机和组件B的事件清理。
摘要由CSDN通过智能技术生成

两个问题：

  • 问题1： 为什么第一次触发的时候页面B中的on事件没有被触发
  • 问题2： 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。

问题一

        第一次触发的时候页面B中的on事件没有被触发

产生原因

当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候，B其实是没有监听到的。

解决办法

我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的on事件已经触发了，所以可以在beforeDestory的时候， on事件已经触发了，所以可以在beforeDestory的时候，on事件已经触发了，所以可以在beforeDestory的时候，emit事件

问题二

        后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。

产生原因

就是说，这个$on事件是不会自动清楚销毁的，需要我们手动来销毁。（不过我不太清楚这里的external bus 是什么意思，有大神能解答一下的吗，尤大大也提到如果是注册的是external bus 的时候需要清除）

解决办法

在B组件页面中添加Bus.$off来关闭

最低0.47元/天 解锁文章
Vue组件通信（非父子通信之Bus）
Dreamer_xr的博客
07-18 1619
我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父） 今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用 个空的 Vue 实例作为中央 件总线（ bus ），也就是 相当于一个中介。 比如你需要租房子 你可能会找房产中介来登记你的需求 然后中介把你的信息发给满足要求的出租者...
Vue：Vue的路由，组件通讯、传值的多种方式
lyj15390447067的博客
03-24 2399
Vue里面的所有通信方式(组件,动态路由等等)
vue事件总线坑
weixin_44637134的博客
02-01 597
解决vue事件总线第一次监听步到和监听次数越来越多的问题 第一次监听不到的原因(生命周期，组件A触发事件时￥emit发射的事件组件B在mounted生命函数中是接收不到的，因为这时候组件B还没创建出来，所以我们必须在组件A的deactivated(组件在keep-alive生效的情况)或beforeDestroy或destroy函数中￥emit发送事件，如果要携带item或者index，可以先在data中保存) 监听依次增多的问题(我们需要在￥on之前手动关闭￥emit) ...
vue中总线Bus传值的哪些坑
Config_js的博客
05-31 586
动态组件中用总线Bus的坑
关于vue中央总线踩坑（一定要销毁）
qq_42931285的博客
03-21 1148
一定要销毁！！！！一定要销毁！！！ 页面A发送方(组件emit触发事件)； 页面B接收方(on接收事件)； 踩坑1： 问题一 第一次触发的时候页面B中的on事件没有被触发； 产生原因： 当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created（或mounted）中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候，B其实是没有监听到的。这个需要看一下两个组件的生成顺序了！可以通过在钩子函数中想法$emit实现。若实现不行则不适用。 后面再一次依次去触发的时候会出现，每一
Vue 传参踩坑之旅——事件总线与 props
Jackson_Mseven的博客
11-07 198
这个 bug 其实给了我蛮多启发的，也能理解之前看到别人说业务组件中尽量使用了，事件总线的原理我其实是知道的，但是还是会产生这种 bug，因为随着业务的发展，新功能的产生以及老功能的优化等都可能对原来的数据结构或组件结构进行更改，在我们写业务代码时是比较难精准的预料到未来的变化的，此时就需要我们的代码有足够高的容错性，诸如、事件总线等组件通信方式固然很方便，但是在代码重构或其他一些比较重大改动时项目的数据流又会变得难以预测。代码量会变得更多、冗余组件数据流变得清晰当项目结构发生变化时重构会更简单。
vue笔记
m0_55546349的博客
05-17 930
如何让flex:1 html:给他以及它的所有父元素设置高度100%； vue: 给app设置高度100% public里index.html也添加body,html{hright:100%} 父元素flex:1;overflow:aoto; 各自overflow:auto; 浏览器自动开启/热更新-端口修改 在项目的根路径下根路径下根路径下根路径下创建一个文件名为vue.config.js module.exports = { devServer: { open: true,
Vue+TS 踩坑记录与方案总结
HTML网页设计
08-08 1324
vue 和 TypeScript 结合的情况下，很多写法和我们平时的写法都不太一样，这里总结我项目开发过程中遇到的问题和问题的解决方案。
Vue中的事件总线(EventBus)是什么？它有什么优点和缺点？
最新发布
Coding home - 漂流瓶jz
03-01 2284
事件总线是一种组件通信方式，用于在工程的中的任意组件中进行事件触发和数据传递。通过在全局创建一个事件总线，所有组件（无论他们的关系是父子还是兄弟还是不相关）都可以使用同一个总线发送事件和监听事件，传输数据。这样通信就可以不受组件间关系限制，实现灵活的通信能力。事件总线作为一种全局的组件通信方法，符合订阅发布模式，由于其简单有效的使用方式，受到部分开发者的欢迎。但是由于各种使用不慎和维护带来的问题，官方和许多开发者也不推荐使用：在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。
vue总线机制(bus)知识点详解
01-19
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。 vuex适用中大型项目、数据在多组件之间公用的情况。 简单介绍两者的区别之后，就要介绍下我在一个项目中遇到的一个场景了，这个场景使用bus可能更加适合些： //main.js Vue.prototype.bus = new Vue(); new Vue(
vue项目中全局使用EventBus的方法，以及利弊分析
niuglar的博客
07-21 7234
EventBus是什么 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个地方注册事件，有另外一个或多个地方订阅事件。 为什么要用EventBus vue组件之间的通信，常见的有父传子，子传父，或者兄弟组件间互传，涉及到跨页面时需要用到vuex或者缓存的方式传值。一般来说用vuex做状态管理是项目的首选，但有一些小型而且快
vue 事件总线问题
qq_38521284的博客
03-05 1440
问题一:  不同组件传值(非父子组件)在main.js中,构建eventBus = new Vue();pageA.vue在methods中发布事件eventBus.$emit('test', 123);应该在pageB.vue生命周期creatd/mounted中触发事件, eventBus.$on('test', (content) => {//content即是出过来的值});问题二:...
vue之事件总线（EventBus）慎用
几百块的博客
10-13 672
通常适用于兄弟组件传值 最好规划好作用范围 - 通过实例控制范围（不同范围不同实例） - 通过命名空间控制范围（不同范围共享同一实例） 新建event-bus.js import Vue from 'vue' export const EventBus = new Vue() 在局部组件引入 import { EventBus } from "/src/event-bus.js"; 注意，在组件销毁时需要先进行关闭监听！ beforeDestroy() { EventBus.$off("aMsg
中央事件总线数据不更新问题
山岗下的星空的博客
07-25 408
新建until下的js文件,new Vue import Vue from "vue" export default new Vue 错误写法 触发 <template> <div> <button @click="fun()">兄弟通信</button> </div> </template> <script> import Bus from "@/until/indexBus.js" ex
Vue之中央事件总线bus
weixin_48842132的博客
01-18 1152
快速上手使用中央事件总线bus解决兄弟组件和跨多级组件通信问题
vue中总线机制(EventBus)
王春燕的博客
06-08 1310
一、EventBus的简介 二、使用方法 第一步：2种方式初始化 第二步：发送事件 第三步：接受事件 第四步：移除事件 三、全局EventBus 四、EventBus的优缺点 一、EventBus的简介 EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以平行的接到到相对应的数据。...
vue篇之事件总线（EventBus）
u011286552的博客
04-22 556
参考文章：https://www.jianshu.com/p/4fa3bf211785 许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之...
vue2中使用事件总线（EventBus）传值
qq_43575827的博客
07-20 762
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
Vue.js开发神器：vue-bus微型中央事件总线插件
vue-bus是一个专为Vue.js设计的微型、简单的中央事件总线插件。它利用Vue.js的核心概念，将事件总线的创建和管理抽象成一个插件，以便开发者可以更简单地在Vue.js应用中使用事件总线模式。该插件主要解决了非父子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值