vue+EventBus 兄弟组件传值

项目开发中遇到了这样一个业务：
假设父组件是A，子组件是B和C，然后C组件的数据结构是受B组件的改变而改变，就想到了用事件总线（EventBus）来进行兄弟组件之间的通信。
用过之后也确实很好用，记录并分享一波…

一、在utils文件夹文件夹下，新建bus.js(名字可随意取)

import Vue from 'vue'
export default new Vue()

二、引入到兄弟组件B和C中

import EventBus from '@/utils/bus'

三、进行兄弟组件间的通信

假设B组件传值，C组件接收值，其他业务常见一样
B组件 通过 EventBus.$emit 传值：

const obj = {}
obj.name= res.name
obj.age= res.age
EventBus.$emit('modelObj', obj)

C组件 通过EventBus.$on 接收值：

 EventBus.$on('modelObj', res => {
 // 此时就拿到了B组件传递的值
  console.log('res',res) 
})

根据具体的业务场景去考虑是否要移除 事件总线

EventBus.$off("eventName", callback); 只移除这个回调的监听器。
EventBus.$off('eventName'); 移除该事件所有的监听器。
EventBus.$off(); 移除所有的事件监听器，不需要添加任何参数。

到此你就掌握了EventBus这种通信方法了。