多层级组件间通信
如果我们使用vue提供的prop和emit实现会很麻烦，需要层层嵌套。下面介绍的两种方式可以解决该问题。
EventBus
EventBus的使用也很简单。
我们先定义个EventBus.js
import Vue from "vue";
const eventBus = new Vue();
export default eventBus;
然后在组件中引入并使用，这里的示例是点击按钮后发送msg
<template>
<button @click="handlerClick">点击触发事件</button>
</template>
<script>
import eventBus from "../eventBus";
export default {
name: "EventBusDemo",
methods: {
handlerClick() {
// 参数1：事件名:
// 参数2：数据
eventBus.$emit("custom-event", "点击按钮后按钮的值被修改");
},
},
};
</script>
然后在需要接收该事件的组件中处理结果：
<template>
<button>{{ eventBusData }}</button>
</template>
<script>
import eventBus from "../eventBus";
export default {
name: "EventBusDemo2",
props: {
msg: String,
},
data() {
return {
eventBusData: this.msg,
};
},
mounted() {
// 添加 eventBus 监听器
eventBus.$on("custom-event", (value) => {
console.log("Custom event 2222!", value);
this.eventBusData = value;
});
},
beforeDestroy() {
// 移除 eventBus 监听器
eventBus.$off("custom-event");
},
};
</script>
以上就是对EventBus的简单使用。更多更强大的封装，社区也提供了很多版本，可自行搜索并使用。
官方推荐的两个库：
Vue3 对事件总线做了更新，移除了$on、$off 和 $once方法，故如果要在Vue3使用EventBus需要再做调整，这里仅对Vue2做了介绍。
Vuex
可查看这篇文章
Vue2基础- Vuex 的简单使用
总结
props 和emit 的通信方式适用于直接父子关系页面的数据传递EventBus 的通信方式适用于无直接关系的组件的数据传递，通过事件名匹配。Vuex 是全局的状态管理，适用于大项目，页面层级更深更复杂的情况。
-
Prop和事件应该是父子组件之间沟通的首选。兄弟节点也可以通过它们的父节点通信。
-
在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。 -
Vuex 是全局的状态管理，它可以集中式存储管理应用的所有组件状态，它适合大项目使用。
源码示例
组件创建使用示例
|