- 在vue中,我们可以使用props和$emit进行父子组件的传值,但是如果需要互相传值的组件不是父子关系,这时我们使用props进行传值就会非常麻烦,
- 这个时候我们就可以用到$eventBus
### 声明eventBus
- 我们在js入口文件中给vue原型声明一个$eventBus,他的值是一个不带dom组件的vue实例
Vue.prototype.$evnetBus = new Vue();
- 这样我们在一个组件创建时候进行一个事件监听
//在组件一中我们可以在created中进行监听
created(){ this.$eventBus.$on( " 事件名 1" , "事件处理函数1" ) }
- 触发eventBus
//在组件二中我们就可以在任意地方进行触发
this.$eventBus.$emit( " 事件名1 " , " 需要传递的参数1 " )
- 这样我们组件一中的事件监听被执行,传递的参数就收到了
- $eventBus使用起来很方便,但是如果不正确的使用,将会是一场灾难,组件如果被循环得创建和销毁,$eventBus的监听需要我们手动移除,不然因为外部的引用会一直存在,在后期被反复触发,因此所有$evnetBut的监听需要我们在组件销毁时候将监听进行移除
- 我们可以在vue生命周期beforDestory中进行移除,因为我们上面再组件一的created中执行了监听,我们同样在组件一的beforDestory中写入以下代码保证在组件一在被销毁时候移除监听
- 移除eventBus监听
beforDestory(){ this/$eventBus.off ( "事件名1" ) }
- 以上,我们就使用$eventBus进行了一个组件二给组件一传值,并且组件一在销毁时候移除监听的完整操作
