前言

在 Vue 开发中，组件通信是构建复杂应用的基础。随着 Vue 3 的普及，通信方式发生了不少变化（如 defineProps 的引入、EventBus 的退场）。本文将对比 Vue 2 与 Vue 3，带你梳理最常用的 5 种通信方案。

一、 父子组件通信：最基础的单向数据流

这是最常用的通信方式，遵循“Props 向下传递，Emit 向上通知”的原则。

1. Vue 2 经典写法

• 接收：使用 props 选项。
• 发送：使用 this.$emit。

2. Vue 3 + TS 标准写法

在 Vue 3

子组件：Child.vue

二、 跨级调用：通过 Ref 访问实例

有时父组件需要直接调用子组件的内部方法。

1. Vue 2 模式

直接通过 this.$refs.childRef.someMethod() 调用。

2. Vue 3 模式（显式暴露）

Vue 3 的组件默认是关闭的。如果父组件想访问子组件的方法，子组件必须使用 defineExpose。

子组件：Child.vue

父组件：Parent.vue

三、 非父子组件通信：事件总线 (EventBus)

1. Vue 2 做法

利用一个新的 Vue 实例作为中央调度器。

import Vue from 'vue';
export const EventBus = new Vue();

// 组件 A 发送
EventBus.$emit('event', data);
// 组件 B 接收
EventBus.$on('event', (data) => { ... });

2. Vue 3 重要变更

Vue 3 官方已移除了 $on、$off 和 $once 方法，因此不再支持直接通过 Vue 实例创建 EventBus。

• 官方推荐方案：使用第三方库 mitt 或 tiny-emitter。
• 补充：如果逻辑简单，可以使用 Vue 3 的 provide / inject 实现跨级通信。

provide / inject 示例：

1. 祖先组件：提供数据 (App.vue)

2. 中间组件：无需操作 (Middle.vue)

   中间组件不需要显式接收 theme，直接透传即可

3. 后代组件：注入并使用 (DeepChild.vue)

四、 集中式状态管理：Vuex 与 Pinia

当应用变得庞大，组件间的关系交织成网时，我们需要一个“单一事实来源”。

• Vuex：Vue 2 时代的标准。基于 Mutation（同步）和 Action（异步）。

• Pinia：Vue 3 的官方推荐。

  • 优势：更完美的 TS 支持、没有 Mutation 的繁琐逻辑、极其轻量。
  • 核心：state、getters、actions。

Pinia 示例：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '张三',
    age: 18
  }),
  actions: {
    updateName(newName: string) {
      this.name = newName;
    }
  }
});

五、 总结

1. 安全性建议：在使用 defineExpose 时，尽量只暴露必要的接口，遵循最小暴露原则。
2. EventBus 警示：Vue 3 开发者请注意，不要再尝试使用 new Vue() 来做事件总线，应当转向 Pinia 或全局状态。