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

上一篇:flutter 使用socket io 和 EventBus 开发及时通讯


下一篇:mysql删除多个重复数据,多个字段添加唯一性索引