关于vue中bus中央数据总线传值的坑

本文探讨了Vue.js中非父子组件间的通信方法,并详细解释了一个常见误区:即$emit和$on事件触发与监听的时机问题。文章通过具体案例说明了如何避免因组件加载顺序导致的通信失败。

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

官网这个方法是非父子组件之间的传值,用了之后才发现父子组件其实也可以用this.bus.$emit('xxx',data) 和 this.bus.$on('xxx',(data)=>{}) 。但是在用这个传值方法的时候发现一个问题,尤其是在父子组件之间用的时候,从一个组件中使用$emit触发事件之后,另一个组件的监听事件$on不生效,官网的意思就是使用bus传值的时候,$on一定要在$emit事件触发之前就要创建,否则在触发$emit事件的时候,$on是监听不到的(因为这个时候$on压根就没有创建) 。由于项目里父子组件我用了bus,结果不生效,是因为我的子组件是v-if控制的,只有在点击父组件的某个按钮时子组件的v-if才会变成true,恰好我的bus传值中的$emit触发事件也是在点击父组件的时候会触发,这样子组件正在创建的时候(我猜想此时子组件的$on监听事件还没创建,不知道对不对),我的$emit触发事件已经结束了,所以表面上看起来是bus传值不生效,实际上是因为$on监听事件还没创建成功的时候,$emit已经结束了,这是个大坑,也是最近偶然之间踩到的

动动你的小手点个赞就是对我最大的支持!!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值