2021-11-04 学习记录--Vue-事件总线（EventBus）和Vuex的区别

一、事件总线和Vuex的区别

一、事件总线（EventBus）

事件总线是所有组件公用滴事件中心，适用于非父子组件情况，可以向该中心：

发送事件【通过this.$bus.$emit('事件名',参数);】
　或　
接收事件【通过this.$bus.$on('事件名',回调函数(参数))】

1、全局事件总线

【vue-监听图片加载完成-非父子组件】
假如有首页Home.vue、组件Scroll.vue、组件GoodsList.vue、组件GoodsListItem.vue，它们之间的关系被我用一张图展示出来：

下面这些截图是学习视频里老师给出的案例解析，放在这儿，供自己查看，可忽略

第一步、初始化

在main.js中进行初始化：

对应代码：

// 全局事件总线
Vue.prototype.$bus = new Vue() // vue实例可以作为事件总线滴

第二步、发送事件

在组件GoodsListItem.vue中【通过this.$bus.$emit('事件名',参数);】向事件中心发送事件【紫色框框部分】

第三步、接收事件

在首页Home.vue中【通过this.$bus.$on('事件名',回调函数(参数))】接收事件中心里的事件【紫色框框部分】，其余颜色相同滴相对应哒


These are bilibili-coderwhy老师Vue学习视频的 学习笔记~

二、Vuex

【静候补充~】