vue中兄弟组件传值event bus被多次触发以及踩过的坑

传值方式:兄弟组件传值的时候,使用的是 this.$bus.$emit 触发事件和this.$emit.on 监听事件。

业务bug:点击按钮切换兄弟组件,再切换的过程$eventBus出发了多次。

原因:

事件订阅是通过$eventBus对象完成的 与组件无关

后果:如果不移除事件监听 并且会造成内存泄漏

 

分析:

1.当点击销毁子组件的时候 子组件还能接收到数据吗?对应的回调函数还能在执行吗?

答案是 ,事件订阅功能是$eventBus对象完成的,与组件无关,当你点击销毁后 再点击创建又会多了一个订阅事件,依次类推每次点击新建后都会多一个订阅事件。

通过v-if 销毁和重新创建来看通过数据发现 销毁后并没有对空间进行释放

解决方案: 在子组件销毁后进行取消订阅事件

 destroyed() {
        this.$bus.$off('事件名称')
}
posted @   赵辉Coder  阅读(616)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示