Vue EventBus传值的bug(EventBus踩坑)

时间:2020-9-17 作者:admin

前言

三个兄弟组件通信

EventBus未取消绑定,重复触发的bug

基本使用

/新建一个 js 文件,写下如下代码就创建好了一个 eventbus,没错,就是这么简单
import Vue from 'vue'

export default new Vue;

全局调用

在 main.js 中导入 eventbus ,然后将它挂载到 vue 的原型上,这样就可以全局调用了

import bus from './utils/eventBus'
Vue.prototype.bus = bus;

其他文件

//发送
this.bus.$emit(this.$route.path);

//接收
this.bus.$on(this.$route.path,()=>{
  this.getData();
})

//销毁
beforeDestroy() {
  //组件销毁前需要解绑事件。否则会出现重复触发事件的问题
  this.bus.$off(this.$route.path);
},

简单调用

import bus from './utils/eventBus'

//发送
bus.$emit('get', {
  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:多个eventbus,多个组件实时交互,处理逻辑复杂;

3:弹窗还有其他逻辑交流,多功能组件不适合使用eventbus,需要利用vuex实时交互;

4:维护困难

5:除非非常简单逻辑,否则不建议使用eventbus

Vue EventBus传值的bug(EventBus踩坑).md)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。