vue 中 EventBus 实现组件通信

Vue 项目中，一般会通过 vuex 进行状态管理，但在一些小项目或者初期没有规划 vuex 的情况下，在开发过程中需要进行组件通信（不止是父子组件），就可以选择通过 EventBus 来解决。
 

EventBus 又称事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

具体使用：

1、建立一个 bus.js 的文件。

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2、在 main.js 文件中引入。

import EventBus from '@/bus.js'
Vue.use(EventBus)
Vue.prototype.$EventBus = EventBus

3、调用。

// a.vue 里通过 $emit 触发事件
this.$EventBus.$emit('uploading','sure');

// 传递多个值
this.$EventBus.$emit('myClick', {
    id: id,
    num: num
});

// b.vue 里通过 $on 监听事件
this.$EventBus.$on('uploading', val => {
    console.log(val);  //打印出来 val ：sure
})

this.$EventBus.$on('myClick', ({ id,num }) => {
    console.log(id, num);
})

其他文章：

https://www.jb51.net/article/131726.htm

https://zhuanlan.zhihu.com/p/76147272

https://www.cnblogs.com/yangxiaoying/p/11532867.html