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

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

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

原因:

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

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

 

分析:

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

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

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

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

 destroyed() {
        this.$bus.$off('事件名称')
}
posted @ 2023-02-14 11:00  赵辉Coder  阅读(545)  评论(0编辑  收藏  举报