Vue 组件通信全攻略：Props、事件、插槽与依赖注入

快速概述

Vue 组件通信解决的是组件间数据传递与行为协作的核心问题。无论是构建简单的业务页面还是复杂的中后台系统，组件通信都是架构设计的基础环节。本文适用于使用 Vue 3（组合式 API）的开发者，前置环境要求为 Node.js 16+ 与 Vue 3.2+。掌握 Props、事件、插槽与依赖注入四种方式，即可覆盖绝大多数组件协作场景。

核心概念与原理

Vue 的组件通信遵循单向数据流原则：父组件通过 Props 向子组件传递数据，子组件通过 emit 触发事件向父组件发送消息。插槽则提供了一种结构分发机制，让父组件可以向子组件注入模板内容。依赖注入（provide/inject）用于跨越多个层级传递数据，避免逐层传递 Props 的繁琐。理解这些机制的关键在于：Props 是属性传递，事件是行为通知，插槽是内容分发，依赖注入是上下文共享。

实战步骤与代码

1. Props 父传子

// Child.vue
<script setup>
// 使用 defineProps 声明接收的属性
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
</script>
<template> <div> <p>{{ props.title }} - {{ props.count }}</p> </div> </template>

父组件通过属性绑定传递数据：<Child :title="'Hello'" :count="5" />。注意 Props 是只读的，子组件不应直接修改。

2. 事件子传父

// Child.vue
<script setup>
const emit = defineEmits(['update'])
function handleClick() {
  emit('update', '新数据') // 触发事件并携带参数
}
</script>
<template> <button @click="handleClick">发送事件</button> </template>

父组件监听事件：<Child @update="handleUpdate" />，在 handleUpdate 中接收子组件传来的数据。

3. 插槽内容分发

// Card.vue
<template>
  <div class="card">
    <slot name="header">默认标题</slot>
    <slot>默认内容</slot>
  </div>
</template>

父组件使用具名插槽：<Card><template #header>自定义标题</template>正文内容</Card>。插槽让组件更具复用性。

4. 依赖注入跨层级

// 祖先组件
<script setup>
import { provide } from 'vue'
provide('theme', 'dark') // 提供数据
</script>
// 后代组件 <script setup> import { inject } from 'vue' const theme = inject('theme', 'light') // 注入数据，带默认值 </script>

依赖注入适合主题、用户信息等全局性数据，避免逐层传递。

常见坑点与优化

• Props 直接修改报错：Vue 会警告，应通过事件通知父组件修改。
• 事件命名大小写：模板中推荐使用 kebab-case（如 @update-data），避免大小写不一致问题。
• 插槽默认内容缺失：未提供插槽内容时，默认内容生效，注意设计合理的默认值。
• 依赖注入响应性：provide 的值若为普通对象，不具备响应性，应使用 ref 或 reactive 包装。
• 性能优化：避免过度使用依赖注入，它会使组件耦合度提高；对于高频更新的数据，优先考虑 Props 与事件。

选型建议：父子直接通信用 Props + 事件；兄弟组件用状态提升；跨层级用依赖注入；复杂状态管理可引入 Pinia。根据场景选择最合适的方式，保持组件职责清晰。