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