项目开发中遇到了这样一个业务:
假设父组件是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这种通信方法了。