06｜跨组件数据通信：常见的组件间数据通信方式有哪些？-Vue3企业级项目实战

当前位置:　首页>> 技术小册>> Vue3企业级项目实战

06｜跨组件数据通信：常见的组件间数据通信方式有哪些？

在Vue 3的企业级项目开发中，组件间的数据通信是构建复杂应用的核心技能之一。Vue通过其响应式系统和组件化的设计理念，提供了多种机制来实现不同组件间的数据共享与交互。本章节将深入探讨Vue 3中常见的几种跨组件数据通信方式，包括props与$emit、Vuex状态管理、provide与inject、ref与reactive在组件间共享、以及使用事件总线（Event Bus）或Vue 3的Composition API中的mitt库等。

1. `props`与`$emit`：父子组件通信的基础

在Vue中，父组件向子组件传递数据主要通过props实现，而子组件向父组件发送消息则通常使用$emit方法。这种方式是Vue组件间最基础也是最直接的通信方式。

props：父组件通过props向子组件传递数据。在子组件中，这些props被当作是局部属性来接收。Vue 3推荐使用defineProps（在<script setup>中）或props选项（在<script>中）来声明接受的props。

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const parentMessage = 'Hello from Parent';
</script>
<!-- 子组件 -->
<script setup>
const props = defineProps({
  message: String
});
</script>
<template>
  <div>{{ message }}</div>
</template>

$emit：子组件通过$emit触发事件，向父组件发送消息。父组件可以在模板中监听这些事件，并处理相应的逻辑。

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['update:message']);
function handleClick() {
  emit('update:message', 'New message from Child');
}
</script>
<template>
  <button @click="handleClick">Update Message</button>
</template>
<!-- 父组件 -->
<template>
  <ChildComponent @update:message="handleUpdate" />
</template>
<script setup>
function handleUpdate(newMessage) {
  console.log(newMessage);
}
</script>

2. Vuex：复杂应用的状态管理

对于大型应用来说，简单的父子组件通信可能不足以满足需求。Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理：Vuex使用单一状态树（Single Source of Truth），即应用的所有状态都存储在同一个对象（store）中。这个store包含了应用中大部分的状态。
Getters：允许组件从store中派生一些状态。
Mutations：是同步函数，用于更改store中的状态。每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更新的地方，并且它会接受state作为第一个参数。
Actions：类似于mutations，不同在于actions提交的是mutations，而不是直接变更状态。actions可以包含任意异步操作。
Modules：允许将单一的store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

3. `provide`与`inject`：跨级组件通信

在Vue 3中，provide和inject选项用于实现跨组件级别的通信，尤其是那些没有直接父子关系的组件。

provide：允许你指定你想要提供给后代组件的数据/方法。
inject：允许一个后代组件接收由祖先组件通过provide提供的依赖项。

这种方式在开发具有深层嵌套组件结构的应用时特别有用，比如当你需要在根组件中定义一些数据或方法，并希望它们能够被任意深度的子组件访问时。

<!-- 祖先组件 -->
<script setup>
import { provide } from 'vue';
provide('message', 'Hello from Ancestor');
</script>
<!-- 后代组件 -->
<script setup>
import { inject } from 'vue';
const message = inject('message');
</script>
<template>
  <div>{{ message }}</div>
</template>

4. `ref`与`reactive`在组件间共享

虽然ref和reactive主要用于Vue的响应式系统，但它们也可以用于在组件间共享数据。不过，这种方式更偏向于组件间直接的数据共享，而不是一种正式的通信机制。

通过父组件传递响应式对象：父组件可以使用reactive或ref创建响应式数据，并通过props传递给子组件。子组件内部修改这些数据将反映到父组件和所有其他使用该数据的组件中。
全局状态管理：对于全局状态，可以使用类似Vuex的模式，但直接利用reactive或ref在全局作用域中定义状态，并通过provide/inject或全局Vue实例的方式使其可在任何组件中访问。不过，这种做法并不推荐，因为它绕过了Vuex提供的许多优点，如状态变更的跟踪和调试能力。

5. 事件总线（Event Bus）或`mitt`库

在Vue 2中，开发者经常使用事件总线（Event Bus）来实现任何组件间的通信。在Vue 3中，虽然Vue实例不再直接作为事件总线使用，但可以通过第三方库如mitt来实现类似的功能。

mitt：是一个轻量级的、基于发布/订阅模式的库，可以很容易地集成到Vue 3项目中，用于组件间的通信。它允许你创建一个事件发射器（emitter），然后在任何组件中通过它来发布或监听事件。

// 创建一个事件发射器
import mitt from 'mitt';
const emitter = mitt();
// 在组件A中发布事件
emitter.emit('custom-event', { data: 'some data' });
// 在组件B中监听事件
emitter.on('custom-event', (e) => {
  console.log(e.data); // 输出: some data
});

总结

Vue 3提供了多种跨组件数据通信的方式，每种方式都有其适用场景和优缺点。在实际项目中，开发者应根据项目的具体需求、组件间的关系以及应用的规模来选择合适的通信方式。props与$emit适合简单的父子组件通信；Vuex是复杂应用状态管理的首选；provide与inject则适用于跨多层级组件的通信；而ref/reactive的共享更多是作为一种技术手段，并非专门的通信机制；对于非父子且非全局状态的组件间通信，可以考虑使用mitt等事件总线库。正确理解和应用这些通信方式，将大大提高Vue 3应用的开发效率和可维护性。