$bus的emit和on执行顺序

最新推荐文章于 2024-06-05 21:59:32 发布
原创 最新推荐文章于 2024-06-05 21:59:32 发布 · 562 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

文章讲述了在使用弹框组件时遇到的问题：首次打开不接收到消息，原因是事件总线的$emit需在$on之后执行。为解决此问题，需用nextTick包裹$emit操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求：

 但是发现弹框组件第一次打开时，接收不到信息，第二次再摊开，就收到消息了。

 

 

原因是因为： 是因为全局事件总线必须先执行$on,再执行$emit

所以我们在使用$bus.$emit发送消息时，要使用nextTick包裹；

 

 

长相思979
关注
Vue事件总线：this.$bus.$emit与this.$bus.$on
skysys的研究小屋
01-15 1万+
1.创建Vue实例 //main.js Vue.prototype.$bus = new Vue(); 2.发射事件 //GoodsList this.$bus.$emit("aaa") 3.监听事件 //home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) 4.示例：监听图片加载 //GoodsListItem.vue <template> <img :src="showImag
解决vue bus.$emit触发第一次$on监听不到问题
10-15
然而，在实际开发过程中，可能会遇到使用bus.$emit触发事件时，第一次$on监听不到事件的问题。本文将对这一问题进行深入分析，并提供有效的解决方案。 首先，需要了解Vue的事件监听和触发机制。在Vue中，$on方法...
vue中$bus.$emit和$bus.$on的用法温故
ldcaws的专栏
06-05 1377
$bus. $emit、 $bus. $on 用于非父子组件之间通信。
vue中$bus的用法及$emit、$on、$off的使用
ldcaws的专栏
12-06 1万+
vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。 如两个组件之间传递数据： 子组件1 子组件2 1、$emit2、$on注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。3、实例事件 实例事件就是在构造器外部调用构造器内部的数据。4、实例 在Student组件中提供数据给另一个School组件 在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑
实现bus的emit和on
weixin_52335582的博客
06-05 396
vue3+ts实现eventBus
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 4万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
uniapp中使用uni.$emit和uni.$on进行页面通讯传值
hu104160112的博客
06-02 1万+
注意事项 1.uni.emit、uni.emit、 uni.emit、uni.on 、 uni.once、uni.once 、uni.once、uni.off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等 2.使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.on注册监听，onUnload里边uni.on 注册监听，onUnload 里边 uni.on注册监听，onUnload里边uni.off 移除，或者一次性的事件，直接使用 uni.$once 监听 A
this.$bus.$on不触发
03-18
3. **检查事件名称一致性**：确认`$emit`和`$on`使用的事件名称字符串完全相同，包括大小写和特殊字符。 4. **使用正确的上下文**：在监听事件时，确保回调函数的`this`指向正确的Vue组件实例。如果使用普通函数，...
this.$bus.$on 失效
最新发布
05-10
因此，在某些情况下，比如组件初始化较慢或者异步操作延迟执行，可能导致 `$emit` 已经发送完毕而 `$on` 尚未准备好。 2. **组件销毁后残留监听器** 当组件被销毁时，如果没有及时移除对应的 `$on` 监听器（通过 ...
组件A在初始化时，会调用$bus.$emit('methodA', p1,p2)，组件B通过$bus.$on('methodsA')接收，现在的问题是，组件A在初始化时调了这个方法，但是此时B组件还未加载，接收不到，该如何解决
02-21
问题出在组件A初始化时发送事件，但组件B此时还未挂载，所以它的$bus.$on还没执行，导致事件丢失。 常见的解决方法有几个。第一，可以让组件A在发送事件的时候，确保组件B已经加载。比如，如果组件B是通过路由动态...
bus.$emit和bus.$on的用法
weixin_44281416的博客
10-29 7200
bus用来传递非父子关系的数据 如两个子组件之间传递数据 子组件1 this.bus.$emit("change",param) 子组件2 this.bus.$on("change",function(param){ }) 补充：子组件中也可以写成这样的箭头函数 this.bus.$on("change",para=>{ }) ...
$emit和$on（bus.$on）
碉堡飞哥的博客
05-29 1万+
一、$emit 1、this $emit（'自定义时间名',要传送的数据）； 2、触发当前实例上的时间，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 经典案例： 子组件： 父组件： 这里需要强调的一点是：on和emit事...
兄弟组件间通信：事件总线的使用bus、bus、emit、$on
吴川华仔的博客
11-11 1867
兄弟组件间通信：事件总线的使用bus、bus、bus、emit、$on 文章目录兄弟组件间通信：事件总线的使用bus、bus、bus、emit、$on一、介绍二、使用 一、介绍 ​ 一个vue.js肯定是由多个组件组成的，而组件实例的作用域是相互独立的，即不同组件之间的数据无法简单的相互引用。 ​ 但是避免不了有时需要相互引用，比如一个父组件包含多个子组件，当父组件更改后需要同时更新各个子组件的数据。 ​ 一般组件间有几种关系，像A.vue与B.vue是父子关系，A.vue与C.vue是隔代关系，C
vue 全局事件总线 $on无法监听到$emit传递过来的数据
weixin_46418764的博客
03-20 970
vue 全局事件总线 $on无法监听到$emit传递过来的数据
Vue3 $bus使用方式
weixin_39428080的博客
07-14 788
Vue3 $bus
解决Vue使用$bus总线时,路由跳转时数据没成功传递问题
m0_51056513的博客
07-18 2685
$bus总线是vue中路由跳转传递数据的常用方法，适用于传递数据不多的情况，但是在使用的过程中发现，bus总线路由跳转的时候总是不能够成功传递需要传递的数据。
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 9639
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
$emit(),$on()不起作用？
qq_36490598的博客
05-29 4094
仅此记录，以做提醒 前些天，一直看的vue文档教程，以致在用uniapp写h5页面时，一直查看的是vue文档。所以在子组件给父组件传值的时候，用的都是this.$ emit,父组件用的this.$on()来监听，发现怎么都监听不到传过来的数据。于是采用在父组件页面中给子组件自定义事件处理 父组件 <template> <view > <img-uploader @images="getImgUrls"></img-uploader> </view
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值