vue中eventBus的使用

使用场景：
1、兄弟组件的通信，父子组件的通信
2、不同路由的通信

针对兄弟组件的通信，父子组件的通信
新建bus.js文件

import Vue from 'vue'
var bus = new Vue()
export default bus

在需要通信的组件中引入bus.js，一个组件触发事件，另一个组件监听事件

 import Bus from "@/assets/js/bus.js"
子组件
    testClick(){
        alert("test")
        Bus.$emit("message","hiinew")
    },
父组件
  mounted(){
    var _this = this
    Bus.$on("message",function(res){
     _this.message = res
    })
  }    

针对不同路由的通信

需要在A组件销毁前触发事件
 beforeDestroy () {
   Bus.$emit("message","hii") 
 },
 在B组件created中接收事件
  created () {
     var _this = this     
     Bus.$on("message",function(res){
       console.log(res+"123")      
       _this.message = res
    })  
 },
 并且在B组件的销毁前解除监听 避免重复监听
  beforeDestroy () {
   Bus.$off("message")  
 },

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/3139263