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的监听需要我们手动移除,不然因为外部的引用会一直存在,在后期被反复触发,因此所有$evnetBut的监听需要我们在组件销毁时候将监听进行移除

• 我们可以在vue生命周期beforDestory中进行移除,因为我们上面再组件一的created中执行了监听,我们同样在组件一的beforDestory中写入以下代码保证在组件一在被销毁时候移除监听

• 移除eventBus监听

    beforDestory(){    this/$eventBus.off (    "事件名1"    )  }
  

• 以上,我们就使用$eventBus进行了一个组件二给组件一传值,并且组件一在销毁时候移除监听的完整操作