vue的非父子组件通信（兄弟组件通信）

在平时写代码中，用的父子组件通信比较多，第一次使用非父子组件通信，浏览了一些他人的文章，大体一致的使用，一下是我的案例中使用

使用场景：在不是父子组件关系进行通信传值，在elementui中tabs页之间通信，即在负载均衡页面把异步操作获取的值传递到另一个tab页域名配置：负载均衡页面 => 域名配置页面

在我的案例中，只有在同一个路由中的组件才能进行非父子通信，两个不同的路由的组件相互通信用这个方法好像不行，不起作用，我对这个还不是了解很深入，目前还母鸡怎么肥事，望指点，十分感谢！

1、创建一个eventBus空的vue实例作为一个事件总线，作为中转，为什么用新的vue实例，易于管理（别人说的）。

在utils文件夹新建一个空的vue实例bus.js，内容如下：

/** bus.js
 * 使用eventBus
 */
import Vue from 'vue'
const bus = new Vue()
export default bus

2、使用 使用 on 接受传值，$off销毁时间绑定

/** 在负载均衡页面
*/
<script>
import { getLbList } from '@/api/app-lb.js' // 接口的封装 获取负载均衡的列表接口
import bus from '@/utils/bus.js'

export default {
     data() {
        return {
           lbList: []
        }
     },
     methods: {
    // 获取负载均衡列表
        getLbList() {
            this.loadings.lb = true
            getLbList(this.appId).then(res => {
                this.lbList = res.model ? res.model.map(item => new DeploymentModel(item)) : []
                bus.$emit('BusGetLBList', this.lbList) // 与域名配置通信
                this.loadings.lb = false
            }).catch((err) => {
                this.loadings.lb = false
                this.lbList = []
              err.errorMessage ? this.$message.info(err.errorMessage) :         this.$message.info('获取负载均衡列出错，请稍后重试')
            })
         },
      }
}
</script>

/** 在域名配置页面
*/
<script>
import bus from '@/utils/bus.js' // 与负载均衡非父子之间通信

export default {
  name: 'TemplateDialog',
  data() {
      return {
         LbList: [], // 与负载均衡通信获取负载均衡列表
      }
  },
// 必须放在created中
  created() {
    bus.$on('BusGetLBList', val => {
      val.length ? (
        this.LbList = val
      ) : (
        this.LbList = []
      )
    })
  },
  // 组件销毁时解除事件绑定
  beforeDestroy() {
    bus.$off('BusGetLBList')
  },