vue兄弟组件通信eventBus第一次监听不到数据

最新推荐文章于 2023-12-22 17:02:50 发布
最新推荐文章于 2023-12-22 17:02:50 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： 项目问题小记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honeymoon_/article/details/122366309
版权

eventBus的$on必须在$emit之前执行。
否则会出现监听不到数据的现象。

有一些网友说，在$emit外加$nextTick或者setTimeout，有些场景这个解决方案是没有作用的。

所以，为了避免bug，eventBus慎用。 先传父组件，由父组件给兄弟组件，也很香。

杜蜜月
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决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的时
vue2.0s中eventBus实现兄弟组件通信的示例代码
08-29
主要介绍了vue2.0s中eventBus实现兄弟组件通信的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 2万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
用event bus解决vue中无法监听到this.$slots.default变化的
hellenYuan的博客
04-26 4081
用event bus解决vue中无法监听到this.$slots.default变化 （包含去除$slots.default中的空白节点this.$slots.default关于event bus代码实现 this.$slots.default vue官网中提到： default property 包括了所有没有被包含在具名插槽中的节点。 也就是说可以通过$slots.default获取到通过...
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 8824
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
使用eventbus接收不到消息
taowuhua的博客
12-12 3783
这个连接解决了很大一部分问题 http://jp1017.top/2016/05/31/EventBus3-%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8%E5%8F%8A%E6%B3%A8%E6%84%8F%E7%82%B9/ 1.首先可以判断一下  if (!EventBus.getDefault().isRegistered(this)) { Even
vue中央事件总线解决第一次进去之后不能监听，出来在进去就能触发监听
lyj15390447067的博客
04-20 1297
vue中央事件总线解决第一次进去之后不能监听，出来在进去就能触发监听
vue使用bus监听不到的原因
weixin_45367605的博客
02-03 1217
进入路由之前，判断进入这个用户主页是否会本人，不是本人，侧边栏需要换，把事件通过bus传递。 侧边栏创建完就开始监听了，可是一直没监听到。 原因： 1111111是在发送事件的时候执行的，但是侧边栏组件还没开始创建。也就是说我没还监听，这边已经发送了。 ...
vue 子组件watch监听不到prop的解决
10-14
主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
本篇文章主要介绍了Vue 兄弟组件通信的方法（不使用Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中使用eventBus遇到数据不更新的问题
u010007013的博客
04-25 8800
今天在项目的一个组件需要向兄弟组件传数据，所以想到了使用eventBus。 首先，我先建立了一个eventBus.js，代码如下： import Vue from 'vue' const eventBus = new Vue() export default eventBus 然后在需要往外传值的组件中引用eventBus.js： import eventBus from '@/assets/j...
事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）
金乌的博客
11-25 3241
组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。
使用EventBus通讯不成功
软小鬼的博客
07-20 1264
EventBus遇到的坑
vue中使用eventBus为什么接受不到数据
qq_42931285的博客
06-08 2314
eventBus、组件通信
vue中$emit触发的事件，$on 第一次监听不到数据，利用eventBus解决，并进行页面动态响应
qq_36490598的博客
03-05 7592
组件与页面之间想通过$ emit，来触发一个事件，传递数据，可是当在目标页面利用$on监听事件，获取数据时，发现第一次并不能监听到事件，而返回再次点击就可以监听到数据。 原因在于$ emit 先于$ on 执行了，Vue并没有储存监听事件，所以无法监听到数据。 因为不想用vuex来解决，所以利用eventBus来解决，而且组件不直接通过$on来存储数据，而是利用bus实例来存储数据，然后组件只负责...
vue兄弟组件间通信&eventbus遇到的问题（多次触发、第一次不触发）
Schaffer的博客
11-18 4481
EventHub 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。 EventHub 想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。 而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个： 监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能
eventbus，在this.$on监听事件时无法在获取数据
最新发布
Wu_whiteHyacinth的博客
12-22 1144
eventbus，在this.$on监听事件时无法在获取数据
Vue.js事件总线（EventBus）
我的学习笔记
03-07 587
许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。 父子组件通讯原则 为了提高组...
vue组件传参eventbus
08-24
对于Vue组件之间的通信，可以使用事件总线（EventBus）来传递参数。下面是一个使用EventBus传递参数的示例： 首先，在你的Vue项目中创建一个新的文件，例如event-bus.js，用于创建和导出一个EventBus实例： ```javascript import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; ``` 然后，在需要传递参数的组件中，可以使用EventBus来触发事件并传递参数： ```javascript import EventBus from '@/event-bus.js'; export default { methods: { sendMessage() { const message = 'Hello!'; EventBus.$emit('messageSent', message); }, }, }; ``` 在接收参数的组件中，可以使用EventBus来监听事件并获取传递的参数： ```javascript import EventBus from '@/event-bus.js'; export default { created() { EventBus.$on('messageSent', (message) => { console.log(message); // 输出 'Hello!' }); }, }; ``` 通过以上方式，你可以在Vue组件之间传递参数，实现组件间的通信。请注意，在使用EventBus时，确保正确导入和使用EventBus实例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值