Vue EventBus传值的bug(EventBus踩坑)

前言

三个兄弟组件通信

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)

原文链接:segmentfault.com

上一篇:var,const和let的区别
下一篇:Vue EventBus传值踩坑之Vuex完美解决

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    3 天前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    8 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    22 天前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    5 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设置...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    5 个月前

官方社区

扫码加入 JavaScript 社区