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

多层级组件间通信

如果我们使用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的简单使用。更多更强大的封装，社区也提供了很多版本，可自行搜索并使用。

官方推荐的两个库：

• mitt
• tiny-emitter

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

Vuex

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

总结

• props 和emit 的通信方式适用于直接父子关系页面的数据传递
• EventBus 的通信方式适用于无直接关系的组件的数据传递，通过事件名匹配。
• Vuex 是全局的状态管理，适用于大项目，页面层级更深更复杂的情况。

1. Prop和事件应该是父子组件之间沟通的首选。兄弟节点也可以通过它们的父节点通信。

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

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

源码示例

组件创建使用示例