vue之$eventBus非父子组件传值使用解析

- 在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进行了一个组件二给组件一传值,并且组件一在销毁时候移除监听的完整操作