vue组件通信方式之eventBus

我们在vue项目中最常遇到的问题就是组件之间的通信，父子通信，兄弟通信，跨组件之间的通信。

父子通信，通常父组件向子组件通过props传值，子组件通过使用$emit向父组件传参，还有诸如 $parent ,$children, $refs 等直接获取组件的方法。兄弟组件，或者没有直接联系的组件之间进行通信时就会比较麻烦，比较常用的就是vuex等状态管理工具。

此时，我们还有一个简单的方法那就是vue事件总线（eventBus），通过创建一个空的vue实例作为全局事件总线，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

一、使用方法：

1、在main.js中创建一个空的vue实例作为全局事件总线，同时，将其绑定在vue原型上。

//main.js
Vue.prototype.$eventBus = new Vue()

2、子组件或兄弟组件，通过$emit来触发事件。

sendFunc(){this.$eventBus.$emit( 'changeFunc' ,  123, 'abc' )
}

3、父组件或兄弟组件，通过$on来监听事件。

created(){//绑定前需先解绑，避免反复触发、内存泄漏的问题this.$eventBus.$off( 'changeFunc' );  this.$eventBus.$on( 'changeFunc' , (val1, val2)=>{this.msg = val1;this.msg2 = val2;} )
}

注意：在绑定前，一定要先解绑，避免反复触发、内存泄漏等问题。

tips：如果绑定的事件过多的话，最好在总线处备注好所有绑定的事件名，便于维护。其实，如果真绑定那么多的话，最好还是不要用了，还不如老老实实用vuex呢。

二、绑定前先解绑 $off

组件监听eventBus中的事件前，一定要记得先解绑。

created(){//this.$eventBus.$off( 'changeFunc' );  this.$eventBus.$on( 'changeFunc' , (val)=>{this.msg = val;} )
}

如上，绑定前不解绑的话，主要有两方面的问题：1、事件反复触发；2、内存泄漏；

问题1、事件反复触发

如果我们销毁组件后，再重新加载组件，那么created中绑定的事件，订阅几次呢？答案是两次，也就是当我们触发这个事件的时候会执行两次。

原因分析：

由于eventBus是在main.js中的vue实例中创建的，所以，不管组件是不是销毁，对于事件总线来说，都没有任何变化。当重新创建该组件的时候，又一次执行了created中的绑定，上一次还没有销毁，所以会执行两次，以此类推，会越来越多。

问题2、内存泄漏（闭包）

created(){//this.$eventBus.$off( 'changeFunc' );  this.$eventBus.$on( 'changeFunc' , (val)=>{this.msg = val;   //此处是一个闭包} )
}

$on监听事件时，在回调函数中引入了函数之外的一个变量 msg，生成了一个闭包。

当我们销毁组件时，如果没有取消订阅，则msg并不会被重置，也就产生了内存泄漏。

四、$off 语法

$off()                //取消所有的事件订阅；
$off('事件名')         //取消指定事件名的；
$off('事件名', 回调)   //取消指定事件名的指定回调

vue组件通信方式之eventBus相关推荐

Vue 组件通信方式居然有这么多？你了解几种
↓推荐关注↓ 前端技术编程专注于分享前端技术:JS,HTML5,CSS3,Vue.js,React,Angular 等前端框架和前端开源项目推荐! 0篇原创内容公众号 vue组件通信的方式,这是在 ...
超实用的 Vue 组件通信方式大汇总（8种）
文章目录前言一.Vue组件关系二.Vue组件通信方式 1. props / $emit 1.1 props 父传子 1.2 $emit 子传父 1.3 父子组件双向绑定 1.3.1 v-mode ...
8种vue组件通信方式
vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好 ...
【面试常考】Vue组件通信方式
1.常见组件通信场景大致有: (1)父子组件通信 (2)非父子组件通信(兄弟.跨层级) 2.组件间通信方式有: (1)父组件向子组件: 父组件通过props传递数据,包括一般数据.函数 (2)子组件向 ...
Vue 组件通信方式
包括父->子,子->父,以及无关系组件等三种父组件-->子组件通过props属性通信子组件-->父组件通过监听事件$emit的方式通信其他组件通信通过中央事件总线(事件车 ...
vue 修改div宽度_Vue 组件通信方式及其应用场景总结（1.5W字）
前言相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
c++中获取蓝图组件_Vue组件通信方式居然有这么多？你了解几种
作者:梨香链接:https://juejin.im/post/6887709516616433677 vue组件通信的方式,这是在面试中一个非常高频的问题,我刚开始找实习便经常遇到这个问题,当时只知 ...
vue的组件通信方式
组件通信方式一.props / $emit 1. 父组件向子组件传值 2. 子组件向父组件传值二. $children / $parent 三.provide/ inject 四.ref / re ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

vue组件通信方式之eventBus

vue组件通信方式之eventBus相关推荐

最新文章

热门文章