- 在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 " )
-
这样我们组件一中的事件监听被执行,传递的参数就收到了
-
e v e n t B u s 使 用 起 来 很 方 便 , 但 是 如 果 不 正 确 的 使 用 , 将 会 是 一 场 灾 难 , 组 件 如 果 被 循 环 得 创 建 和 销 毁 , eventBus使用起来很方便,但是如果不正确的使用,将会是一场灾难,组件如果被循环得创建和销毁, eventBus使用起来很方便,但是如果不正确的使用,将会是一场灾难,组件如果被循环得创建和销毁,eventBus的监听需要我们手动移除,不然因为外部的引用会一直存在,在后期被反复触发,因此所有$evnetBut的监听需要我们在组件销毁时候将监听进行移除
-
-
我们可以在vue生命周期beforDestory中进行移除,因为我们上面再组件一的created中执行了监听,我们同样在组件一的beforDestory中写入以下代码保证在组件一在被销毁时候移除监听
-
移除eventBus监听
beforDestory(){ this/$eventBus.off ( "事件名1" ) }
-
以上,我们就使用$eventBus进行了一个组件二给组件一传值,并且组件一在销毁时候移除监听的完整操作