当前位置: 首页 > Web前端 > vue.js

VueEventBus传值bug(EventBus踩坑)

时间:2023-03-31 17:04:48 vue.js

前言三兄弟组件通信EventBus不是unbound,反复触发的bug基本上都是利用/新建一个js文件,写下面的代码创建一个eventbus,没有错,是那个简单的importVuefrom'vue'exportdefaultnewVue;global在main.js中调用importeventbus,然后挂载到vue的prototype上,这样就可以调用importbusfrom'./utilsglobally/eventBus'Vue.prototype.bus=bus;其他文件//发送this.bus.$emit(this.$route.path);//receivethis.bus.$on(this.$route.path,()=>{this.getData();})//DestroybeforeDestroy(){//事件需要在组件销毁前解除绑定.否则会出现重复触发事件的问题',{item:item.type,date:date})//接收bus.$on('get',this.myhandle)//销毁beforeDestroy(){//组件销毁前需要解绑事件.否则会出现重复触发事件bus.$off('get');}的问题,友达提出如下解决方案//在B组件页面添加如下语句,在组件beforeDestory时销毁。beforeDestroy(){bus.$off('get',this.myhandle)},如果要使用bus在页面组件之间传递数据,需要注意高亮部分。组件A$emit事件应该在beforeDestory生命周期内。第二,B组件中的$on记得销毁。处理心得1:友达的方案虽然可以销毁$on,但是多个eventbus,如果处理不慎,很容易导致事件没有再次触发;2:多个eventbuses,多个组件实时交互,处理逻辑复杂;3:弹窗还有其他逻辑通信,多功能组件不适合使用eventbus,需要使用vuex进行实时交互;4:难维护5:除非是很简单的逻辑,否则不建议使用eventbus