bus.js非父子组件之间通讯

bus.js非父子组件之间通讯

区别：
bus.js就是一个公共的vue实例专门处理emit和on事件。
vuex.js是做全局数据处理的，是指限定了对公共数据的使用处理方法，统一管控

vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。
bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

1.bus.js文件: assets目录下

import Vue from 'vue'
//  创建通讯实例
var bus = new Vue()
export default bus

2.在需要通讯的页面引入：

import Bus from '@/assets/common/bus'

3.在数据发起方发送：

Bus.$emit('getCode',this.openDialog1.groupid)

4.数据接收方获取：mounted里

Bus.$on('getCode', function (msg) { // 获取小助手列表
      var param = new FormData()
      param.append('groupid', msg)
      _PhPApi.getGroupInfo(param)
        .then(res => {
          this.tableData = res.data.assistantInfo
        })
}.bind(this))