Vue 组件通信全攻略：4 种核心方式详解（附完整代码示例）

在 Vue 开发中，组件通信是构建复杂应用的基础。本文将全面解析 Vue 中最常用的 4 种组件通信方式：props、ref、emit 和 provide/inject，通过实际场景和完整代码示例，带你掌握组件通信的精髓。

一、组件通信方式全景图

在 Vue 生态中，组件通信主要有以下 4 种核心方式：

方式	通信方向	适用场景	特点
​​props​​	父组件 → 子组件	父组件向子组件传递数据	单向数据流，最常用
​​ref​​	父组件 → 子组件	父组件直接调用子组件方法	直接访问组件实例
​​emit​​	子组件 → 父组件	子组件向父组件发送事件	事件驱动，解耦
​​provide/inject​​	跨层级组件	祖先组件向后代组件提供数据	跨多级组件传递

下面我们通过具体场景和代码，深入理解每种方式。

二、props：父传子的标准方式

1. 核心概念

props 是 Vue 中最基础的父传子通信方式，遵循​​单向数据流​​原则，父组件的数据变化会自动更新到子组件，但子组件不能直接修改 props。

2. 代码示例

父组件

<template>
  <ChildComponent 
    :title="pageTitle" 
    :user-info="userData"
  />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const pageTitle = ref('用户信息');
const userData = ref({
  name: '张三',
  age: 25
});
</script>

子组件

<template>
  <div>
    <h2>{
  { title }}</h2>
    <p>姓名：{
  { userInfo.name }}</p>
    <p>年龄：{
  { userInfo.age }}</p>
  </div>
</template>

<script setup>
// 定义 props（TypeScript 可使用接口定义类型）
const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  },
  userInfo: {
    type: Object,
    required: true
  }
});
</script>

3. 最佳实践

• 使用 defineProps 显式声明 props
• 为重要 props 设置 required: true
• 复杂对象使用 default: () => ({}) 工厂函数
• 避免子组件直接修改 props（用 emit 通知父组件修改）

三、ref：父组件直接访问子组件