美文网首页Vue
Vue中组件通信(eventBus)

Vue中组件通信(eventBus)

作者: Amanda妍 | 来源:发表于2021-07-03 11:45 被阅读0次

    在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。
    eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。
    使用方式:
    1、初始化——全局定义
    全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

    //main.js
    //方式一
    Vue.prototype.$EventBus = new Vue();
    //方式二
    window.eventBus = new Vue();
    

    2、监听事件

    //使用方式一定义时
    this.$EventBus.$on('eventName', (param1,param2,...)=>{
        //需要执行的代码
    })
    //使用方式二定义时
    EventBus.$on('eventName', (param1,param2,...)=>{
        //需要执行的代码
    })
    

    3、触发事件

    //使用方式一定义时
    this.$EventBus.$emit('eventName', param1,param2,...)
    //使用方式二定义时
    EventBus.$emit('eventName', param1,param2,...)
    

    4、移除监听事件
    为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。

    //使用方式一定义时
    this.$EventBus.$off('eventName');
    //使用方式二定义时
    EventBus.$off('eventName');
    

    相关文章

      网友评论

        本文标题:Vue中组件通信(eventBus)

        本文链接:https://www.haomeiwen.com/subject/nfneultx.html