别再用 $emit 满天飞了！Vue 3 组件通信的 4 种正确姿势，第 3 种 90% 的人不知道上个月，我们重构一个

上个月，我们重构一个老项目，发现一个“祖传组件”：

父组件传 props 给子组件
子组件再传给孙子
孙子改了个状态，通过 $emit 一层层往上抛
中间任意一层改名，整条链就断了……

同事苦笑：“这哪是组件通信，这是传话游戏。”

其实，Vue 3 早就提供了更优雅、更健壮的通信方案。
今天我就用 4 种场景 + 对应解法，帮你彻底告别“props drilling”和“emit 地狱”。

先看一张决策图（建议收藏）

场景	推荐方案
父 ↔ 子	`props` + `emit`（基础但够用）
跨多层（祖孙）	`provide / inject`
兄弟 or 任意组件	组合式函数（Composable）+ 响应式状态
复杂全局状态（用户、主题、权限）	Pinia（官方推荐）

注意：不是所有通信都要用 Pinia！ 小范围状态用轻量方案更干净。

姿势 1：父子通信 —— 老老实实用 props/emit（但要规范）

这是最基础的，但很多人写得乱：

反面教材：

<!-- Child.vue -->
<script setup>
const emit = defineEmits(['update-name', 'save', 'cancel', 'validate']);
// 4 个 emit？这个组件到底负责什么？
</script>

正确做法：单一职责 + 语义化命名

<!-- UserForm.vue -->
<script setup>
const props = defineProps<{ modelValue: string }>();
const emit = defineEmits<{ (e: 'update:modelValue', val: string): void }>();

const localValue = ref(props.modelValue);
watch(() => props.modelValue, v => localValue.value = v);

const handleChange = () => {
  emit('update:modelValue', localValue.value); // 使用 v-model 语法糖
};
</script>

技巧：用 v-model 代替自定义 update-xxx，模板更简洁：
<UserForm v-model="userName" />

姿势 2：祖孙通信 —— 用 `provide / inject` 跳过中间层

当你需要从 App.vue 直接传数据到深度嵌套的 Button 组件，别再层层传 props！

// App.vue
import { provide, ref } from 'vue';

const theme = ref<'light' | 'dark'>('light');
provide('THEME', theme); // 提供响应式数据

<!-- DeepChildButton.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('THEME'); // 自动获得响应性！
</script>

<template>
  <button :class="theme">Click me</button>
</template>

关键点：

如果 provide 的是 ref 或 reactive，inject 拿到的就是响应式的

可以配合 TypeScript 定义 InjectionKey，避免字符串魔法值

// types.ts
import { InjectionKey, Ref } from 'vue';
export const THEME_KEY: InjectionKey<Ref<'light' | 'dark'>> = Symbol('theme');

姿势 3：任意组件通信 —— 用 Composable 封装共享状态（90% 的人不知道！）

这是 Vue 3 最被低估的能力！

想象：两个不相关的弹窗，需要共享“是否正在提交”状态。

错误做法：把状态提到父组件，或滥用 Pinia

正确做法：写一个 useSubmitState composable：

// composables/useSubmitState.ts
import { ref } from 'vue';

const isSubmitting = ref(false);

export function useSubmitState() {
  const start = () => isSubmitting.value = true;
  const end = () => isSubmitting.value = false;

  return { isSubmitting, start, end };
}

然后在任意组件中使用：

<!-- ModalA.vue -->
<script setup>
import { useSubmitState } from '@/composables/useSubmitState';
const { isSubmitting, start } = useSubmitState();

const handleSubmit = () => {
  start();
  // ...提交逻辑
};
</script>

<!-- ModalB.vue -->
<script setup>
import { useSubmitState } from '@/composables/useSubmitState';
const { isSubmitting } = useSubmitState(); // 实时同步！
</script>

优势：

零依赖（不用 Pinia）

天然响应式

可测试、可复用

作用域清晰（只在需要的组件引入）

姿势 4：全局状态 —— 交给 Pinia，别自己造轮子

当状态涉及：

用户登录信息
全局主题/语言
跨路由的数据缓存

这时候就该用 Pinia（Vuex 的继任者，Vue 官方推荐）：

// stores/user.ts
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', () => {
  const profile = ref(null);
  const isLoggedIn = computed(() => !!profile.value);

  const login = async (credentials) => {
    profile.value = await api.login(credentials);
  };

  return { profile, isLoggedIn, login };
});

在组件中：

const userStore = useUserStore();
userStore.login({ email, password });

Pinia 优势：

Composition API 风格

完美 TS 支持

DevTools 调试友好

服务端渲染（SSR）兼容

总结：什么时候用哪种？

需求	推荐方案	是否响应式	适用规模
父子简单传值	props / emit	✅	小
跨层级传配置	provide / inject	✅	中
局部共享状态	Composable + ref	✅	小~中
全局业务状态	Pinia	✅	大

不要：

用 $parent / $children（破坏封装）

用 EventBus（Vue 3 已废弃）

所有状态都塞进 Pinia（过度设计）

最后说两句

组件通信不是技术难题，而是架构选择题。
用对了工具，代码像乐高一样拼接；用错了，就成了意大利面条。

记住：能局部解决的，别全局化；能轻量实现的，别上重型库。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

别再用 $emit 满天飞了！Vue 3 组件通信的 4 种正确姿势，第 3 种 90% 的人不知道