我们在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('事件名', 回调)   //取消指定事件名的指定回调

Logo

前往低代码交流专区

更多推荐