阅读 409

vue 任意组件间通信-全局事件总线(GlobalEventBus)

全局事件总线(GlobalEventBus)

一种组件间通信的方式,适用于任意组件间通信

安装全局事件总线

main.js入口文件配置

  new Vue({
  	......
  	beforeCreate() {
  		Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
  	},
      ......
  }) 
复制代码

使用事件总线

1、接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。

     methods(){
       getName(data){......}
     }
     ......
     mounted() {
       this.$bus.$on('eventName',this.getName)
     }

复制代码

或者使用箭头函数回调,不用在methods中另外写回调方法

 mounted() {
        this.$bus.$on('eventName',(params)=>{
            //逻辑
          })
      }
复制代码

2、提供数据,触发事件:

this.$bus.$emit('eventName',数据)
复制代码

最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

使用解绑单个自定义事件的方式,不能使用$off()这样解绑全部自定义事件了,把其它组件的都解绑了。

  beforeDestroy() {
	 this.$bus.$off('enentName')
	}
复制代码

为什么要解绑呢?就放着不行吗? 因为$bus绑定了很多组件的自定义事件,如果不解绑,那其实这个是多余的事件,不合理了

文章分类
前端
文章标签