Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息

最新推荐文章于 2024-06-05 21:59:32 发布
最新推荐文章于 2024-06-05 21:59:32 发布
阅读量3.6k 收藏 2
点赞数 2
分类专栏： 前端 前端杂记 Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34241861/article/details/106969273
版权
Vue 同时被 3 个专栏收录
24 篇文章 1 订阅
订阅专栏
前端
19 篇文章 3 订阅
订阅专栏
前端杂记
18 篇文章 0 订阅
订阅专栏
问题产生场景

在前端开发任务中，需要实现兄弟组件之间传值。为实现这个目的，采用了 总线 的方式。但是实际结果是当兄弟组件A触发了自定义事件后，兄弟组件B并未监听到相关的信息

问题原因

因为我的代码中$emit()事件先于 $on()监听事件执行了，Vue中并没有储存监听事件，所以无法监听到数据。即使用总线方式实现兄弟组件间的传值时，必须保证 $on()监听事件先被创建，否则无法正常监听消息

参考博客链接：https://blog.csdn.net/qq_39081974/article/details/88184713

小小平不平凡
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多次使用事件车$Bus,连续三次以上,$on接受失效问题
nss33678的博客
03-03 376
经过两个小时的反复复现和测试问题，发现每次下单后都会跳转到订单中心，然后再点击购物车列表进行下单，和路由跳转有关系。然后跳别的页面没事，就是和跳的那个页面有关系。页面里面也有接受别的事件车，在destoryed里面用到了this.$Bus.$of(),没有指定销毁哪个事件，所以把下单跳转过来刷新购物车数量的事件车给销毁了。其实还是小问题，this.$Bus.$of('renewTabs'),指定销毁的事件就好了。这样就不会误销毁别的事件车了。最近在做下单时，连续三次下单，发现后购物车数量不刷新问题。
解决vue bus.$emit触发第一次$on监听不到问题
11-20
$emit与emit与emit与 $on的用法 新建bus.js import Vue from ‘vue’ export const bus = new Vue() 引用bus.js import {bus} from './bus' bus.$on('test', function (msg) { console.log(msg) }) bus.$emit('test', 11) bus.$emit触发第一次emit触发第一次emit触发第一次 $on监听不到 因为$emit 先于 $on 执行了，VUE并没有储存监听事件，所以无法监听到数据。 我这里遇到的是在调用$emit的时
vue中$bus.$emit和$bus.$on的用法温故
最新发布
ldcaws的专栏
06-05 308
$bus. $emit、 $bus. $on 用于非父子组件之间通信。
vue中，监听路由的变化 & 兄弟组件传值过程（创建bus中间件）——vue中$emit触发的事件，$on 第一次监听不到数据，利用eventBus解决，并进行页面动态响应
weixin_44867717的博客
07-03 1532
vue知识
Vue在使用事件总线是出现on没有执行
qq_45626867的博客
10-08 1057
问题 在跳转页面时，发生事件总线时，on无法接收执行。 分析 因为在emit发射时，on来不及创建，所以无法接收 解决 给发射事件添加一个延时 这个问题是在写小程序遇到的。
用event bus解决vue中无法监听到this.$slots.default变化的
hellenYuan的博客
04-26 4123
用event bus解决vue中无法监听到this.$slots.default变化 （包含去除$slots.default中的空白节点this.$slots.default关于event bus代码实现 this.$slots.default vue官网中提到： default property 包括了所有没有被包含在具名插槽中的节点。 也就是说可以通过$slots.default获取到通过...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
10-15
本文将详细介绍Vue组件间事件触发($emit)和Event Bus($on)的用法。 1. **父子组件间事件触发($emit)** 父子组件间的通信通常使用`props`向下传递数据，而子组件向父组件传递信息则使用`$emit`。当子组件需要通知...
Vue 兄弟组件（子组件与子组件间通信）间通信，$on方法失效问题，以及父子组件间通信
laianko的博客
03-30 1366
Vue组件间通信，兄弟组件间，父子组件间
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题_同一页面下的bus通信为什么数据不显示
2401_84447362的博客
05-09 446
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue bus emit第一次on监听不到数据
nongcunqq的博客
09-01 773
在主页面中，以dialog方式调用另一个页面，第一次点击时，仅仅是dialog对话框出现，相应数据并没有传过去，再次点击编辑按钮，数据可以正常传输。 将所要执行的函数，在$nextTick()里面，用箭头函数执行 解决代码 //编辑新闻 handleEdit(index, row) { this.dialogVisible = true this.isShow = true; this.$nextTick(() => { bus.$em
Vue使用bus总线时，第一次路由跳转时数据没成功传递的原因以及解决办法
无人之岛08的博客
12-01 1041
bus总线是vue中路由跳转传递数据的常用方法，适用于传递数据不多的情况，但是在使用的过程中发现，bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法，均没有出错，错就错在没有理解Vue的生命周期！！！ 我们知道bus的$on的监听应该位于$emit之前，如果在emit之前没有创建监听事件，那么肯定是得不到需要的数据。因此，我通过两个页面来了解路由跳转时两个页面的生命周期，下面给出其中一个页面的部分代码： //页面1 beforeCrea.
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题
wanghuan1020的博客
09-30 6510
关于vue中使用事件车Bus方式实现兄弟组件通信时$on无法获取数据的问题问题描述原因解决 问题描述 使用使用一个事件车(总线)的方式实现兄弟组件之间的通信，在接收数据时，当前组件获取到的数据一直未null 首先考虑是不是没有执行这一步代码，随便打印一段信息，控制台正常输出 确认监听事件 $on 的周期确实在 mounted 尝试使用 this.$nextClick ，无效 原因 百度的时候发现： 感悟：$on 注册事件 $emit 触发事件，事件应该是先注册而后才能去触发 联想到自己需要通信的两
Vue2.x中使用Bus遇到的问题及解决方法
qq_42251357的博客
04-28 1952
Vue2.x中使用EventBus遇到的"坑"及解决方法 场景描述：在vue项目中需要在A页面传值到B页面(A和B非关系组件) 问题描述：在A页面点击跳转路由需要把A页面data中的值传到B页面，但是bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据 解决方法：bus的$on的监听应该位于 $emit之前，如果在emit之前没有创建监听事件，那么肯定是得不到需要的数据 就需要在A页面的beforeDestroy或者Destroy生命周期发送数据 在B页面中需要 beforeCreate或cr
【Vue】eventbus 首次$on事件未绑定问题
qq_45677671的博客
08-01 1356
问题背景：A页面跳转到B页面，并传参过去，但是第一次跳转过去不会触发$on事件，第二次能触发但是触发了两次，后面每点一次就会比之前多触发一次
vue使用bus兄弟组件之间传递参数，第一次获取不到值
zhangqling的博客
04-08 2595
$bus作为兄弟元素之间传参的工具，用起来比较的顺手，使用方法在这里就简单的介绍一下： A组件中使用this.bus.bus.bus.emit(‘随便起个名字’, 参数)，在B页面中使用this.bus.bus.bus.on(‘名字’)；就拿到传递过来的值了。记得生命周期结束的时候使用this.bus.bus.bus.off(‘名字’)注销掉。 用法上做了简单的回顾，下面进入正题，第一个进来没有...
bus.$emit在vue怎么触发另一个页面的事件
06-02
在 Vue 中，可以使用 `Vue.prototype.$bus` 创建一个全局事件总线，实现不同组件或页面之间的通信。具体实现步骤如下： 1. 在 `main.js` 中创建全局事件总线： ```javascript import Vue from 'vue' Vue.prototype.$bus = new Vue() ``` 2. 在发送事件的页面或组件中，使用 `$bus.$emit` 触发事件： ```javascript this.$bus.$emit('event-name', data) ``` 其中，`event-name` 是要触发的事件名称，`data` 是要传递的数据。 3. 在接收事件的页面或组件中，使用 `$bus.$on` 监听事件： ```javascript this.$bus.$on('event-name', function(data) { // 处理接收到的事件和数据 }) ``` 其中，`event-name` 是要监听的事件名称，`data` 是接收到的数据。注意，在组件销毁时，需要使用 `$bus.$off` 取消事件监听，避免内存泄漏： ```javascript beforeDestroy() { this.$bus.$off('event-name') } ``` 这样，在一个页面或组件中使用 `$bus.$emit` 触发事件后，在另一个页面或组件中就可以使用 `$bus.$on` 监听到该事件，并处理接收到的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值