Vue2基础-Vue2.x 多层级组件数据通信 EventBus

多层级组件间通信 如果我们使用vue提供的prop和emit实现会很麻烦，需要层层嵌套。下面介绍的两种方式可以解决该问题。

EventBus EventBus的使用也很简单。 我们先定义个EventBus.js

import Vue from "vue"; const eventBus = new Vue(); export default eventBus; 然后在组件中引入并使用，这里的示例是点击按钮后发送msg

然后在需要接收该事件的组件中处理结果：

以上就是对EventBus的简单使用。更多更强大的封装，社区也提供了很多版本，可自行搜索并使用。

官方推荐的两个库：

mitt tiny-emitter Vue3 对事件总线做了更新，移除了$on、$off 和 $once方法，故如果要在Vue3使用EventBus需要再做调整，这里仅对Vue2做了介绍。

Vuex 可查看这篇文章 Vue2基础- Vuex 的简单使用

总结 props 和emit 的通信方式适用于直接父子关系页面的数据传递 EventBus 的通信方式适用于无直接关系的组件的数据传递，通过事件名匹配。 Vuex 是全局的状态管理，适用于大项目，页面层级更深更复杂的情况。 Prop和事件应该是父子组件之间沟通的首选。兄弟节点也可以通过它们的父节点通信。

在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。

Vuex 是全局的状态管理，它可以集中式存储管理应用的所有组件状态，它适合大项目使用。