Vue3父子组件传值：从零到精通

一、先懂原则：单向数据流是灵魂

[二、核心传值方式：90% 场景都用这两个](#二、核心传值方式：90% 场景都用这两个)

[1. 父传子：Props - 数据的 "向下传递"](#1. 父传子：Props - 数据的 "向下传递")

[2. 子传父：自定义事件 - 数据的 "向上通知"](#2. 子传父：自定义事件 - 数据的 "向上通知")

三、进阶用法：让代码更简洁高效

[1. v-model：双向绑定的语法糖](#1. v-model：双向绑定的语法糖)

[2. 父调用子：主动获取子组件能力](#2. 父调用子：主动获取子组件能力)

[四、新手避坑：最容易犯的 5 个错误](#四、新手避坑：最容易犯的 5 个错误)

五、实战场景解析：博客系统中的父子组件

[场景 1：文章列表 + 文章项组件](#场景 1：文章列表 + 文章项组件)

[场景 2：评论输入 + 评论列表组件](#场景 2：评论输入 + 评论列表组件)

[场景 3：分类筛选 + 文章列表组件](#场景 3：分类筛选 + 文章列表组件)

六、学习路径建议：新手如何快速掌握

七、总结：一张表搞定传值选择

组件化是 Vue 开发的核心思想，而父子组件传值则是组件化开发的基石。无论是简单的按钮组件，还是复杂的后台管理系统，所有组件间的交互都建立在数据传递的基础之上。

本文将系统梳理 Vue3 中父子组件传值的核心知识，从底层原则到实战应用，帮助新手建立清晰的知识体系，彻底掌握这一必备技能。

一、先懂原则：单向数据流是灵魂

在学习任何传值方式之前，必须先理解 Vue 设计的核心原则 ------单向数据流。这是所有组件通信的基础，也是新手最容易违反的规则。

单向数据流的核心逻辑是：数据只能从父组件单向流向子组件，子组件永远不能直接修改父组件传递过来的数据。

为什么要设计这样的规则？

数据流向清晰可追踪：所有数据的修改都发生在数据的拥有者（父组件）中，不会出现多个组件同时修改同一份数据导致的混乱
便于调试：当数据出现问题时，只需要向上追溯到数据的源头即可
组件解耦：子组件只负责使用数据，不负责修改数据，组件的职责更加单一

记住一句话：谁的数据谁拥有，谁拥有谁修改。如果子组件需要修改数据，只能通过触发事件通知父组件，由父组件自己完成修改操作。

二、核心传值方式：90% 场景都用这两个

在实际开发中，绝大多数父子组件传值的需求都可以通过以下两种最基础的方式解决。掌握了这两个，你就已经能应对大部分开发场景了。

1. 父传子：Props - 数据的 "向下传递"

Props 是父组件向子组件传递数据的唯一官方方式，也是最常用的传值方式。

适用场景：

子组件需要展示父组件的数据
子组件的行为需要由父组件控制
父组件需要向子组件传递配置项

核心特性：

支持所有 JavaScript 数据类型：字符串、数字、布尔值、对象、数组、函数等
支持类型检查：可以指定 props 的类型，开发时自动校验
支持默认值：当父组件没有传递该属性时，使用默认值
支持必填校验：可以标记某个属性为必填，不传则报错
支持自定义验证：可以编写自定义函数验证传入的值是否符合要求

关键注意事项：

对象和数组的默认值必须通过函数返回，否则多个组件实例会共享同一个引用，导致数据混乱
父组件中使用短横线命名（kebab-case），子组件中必须用驼峰命名（camelCase）接收
Props 是只读的，子组件绝对不能直接修改

2. 子传父：自定义事件 - 数据的 "向上通知"

当子组件需要修改父组件的数据，或者需要将自己的状态通知给父组件时，就需要使用自定义事件。

适用场景：

子组件的按钮被点击，需要通知父组件执行相应操作
子组件的输入框内容发生变化，需要将新值传递给父组件
子组件完成了某个异步操作，需要将结果返回给父组件

核心逻辑：

子组件先通过defineEmits声明自己会触发哪些事件
子组件在合适的时机调用emit函数触发事件，并将需要传递的数据作为参数传入
父组件在使用子组件的标签上通过@事件名的语法监听该事件
父组件在事件处理函数中接收子组件传递的数据，并执行相应的操作

注意事项：

事件名推荐使用短横线命名，和 HTML 原生事件保持一致
可以传递任意类型、任意数量的参数
事件是单向的，只能从子组件流向父组件

三、进阶用法：让代码更简洁高效

在掌握了基础的传值方式之后，我们可以学习一些进阶技巧，让代码更加简洁和高效。

1. v-model：双向绑定的语法糖

v-model是 Vue 中最常用的语法糖之一，它本质上就是Props + 自定义事件的组合封装。

本质：当你在父组件中写<Child v-model="message" />时，Vue 会自动帮你转换成：

javascript 复制代码

<Child :modelValue="message" @update:modelValue="message = $event" />

适用场景：

自定义表单输入组件，如输入框、单选框、复选框、下拉选择器等
任何需要双向数据绑定的组件

约定规则：

默认情况下，v-model 对应子组件的modelValue属性和update:modelValue事件
可以自定义 v-model 的参数，实现多个 v-model 绑定

2. 父调用子：主动获取子组件能力

有时候父组件需要主动调用子组件的方法，或者访问子组件的内部状态，这时候就需要使用ref和defineExpose。

适用场景：

父组件需要主动触发子组件的某个方法，如表单的重置、验证
父组件需要获取子组件的内部状态
父组件需要控制子组件的行为

实现逻辑：

父组件通过ref属性给子组件创建一个引用
子组件通过defineExpose显式暴露需要被外部访问的属性和方法
父组件通过ref.value访问子组件的实例，从而调用其方法或访问其属性

注意事项：

子组件中没有通过defineExpose暴露的属性和方法，父组件是无法访问的
不要滥用这个功能，大多数情况下应该优先使用 Props 和事件进行通信

四、新手避坑：最容易犯的 5 个错误

在学习父子组件传值的过程中，新手很容易犯一些共性的错误。提前了解这些错误，可以让你少走很多弯路。

直接修改 Props：这是最常见也是最严重的错误。子组件直接修改父组件传递的 Props，会破坏单向数据流，导致数据混乱和难以调试的 bug。
命名不规范：父组件中使用短横线命名的属性，子组件必须用驼峰命名接收。如果命名不匹配，数据将无法正确传递。
对象 / 数组默认值错误：对象和数组的默认值不能直接写对象字面量，必须通过函数返回一个新的对象或数组，否则多个组件实例会共享同一个引用。
未声明就触发事件 ：子组件在触发事件之前，必须先在defineEmits中声明该事件。虽然不声明也能运行，但这是不规范的写法，会影响代码的可维护性。
异步数据空指针错误：当父组件从接口异步获取数据并传递给子组件时，子组件初始化时数据可能还没有返回。如果子组件直接访问数据的属性，会导致空指针错误。解决方法是在子组件中添加空值判断。

五、实战场景解析：博客系统中的父子组件

为了让大家更好地理解父子组件传值在实际项目中的应用，我们以一个简单的博客系统为例，看看不同场景下应该如何选择传值方式。

场景 1：文章列表 + 文章项组件

父组件：文章列表组件，负责从接口获取所有文章数据
子组件：文章项组件，负责展示单篇文章的标题、摘要和发布时间
传值方式：父组件通过 Props 将单篇文章的数据传递给子组件

1. 子组件：`ArticleItem.vue`

javascript 复制代码

<template>
  <div>
    <h3>{{ article.title }}</h3>
    <p>{{ article.summary }}</p>
    <div>
      <span>发布时间：{{ article.createTime }}</span>
      <span>作者：{{ article.author }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
interface Article {
  id: number
  title: string
  summary: string
  createTime: string
  author: string
}
const props = defineProps({
  article: {
    type: Object as () => Article,
    required: true
  }
})
</script>

2. 父组件：`ArticleList.vue`

javascript 复制代码

<template>
  <div>
    <h2>最新文章</h2>
    <ArticleItem v-for="article in articles" :key="article.id" :article="article" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ArticleItem from './ArticleItem.vue'
const articles = ref([
  { id: 1, title: 'Vue3 组合式API入门指南', summary: '本文将带你快速了解Vue3组合式API的核心概念。', createTime: '2024-05-20', author: '前端小课堂' },
  { id: 2, title: 'Pinia状态管理最佳实践', summary: 'Pinia是Vue3官方推荐的状态管理库。', createTime: '2024-05-18', author: 'Vue开发者' },
  { id: 3, title: 'TypeScript在Vue项目中的应用', summary: 'TypeScript可以为Vue项目提供强大的类型检查能力。', createTime: '2024-05-15', author: 'TS爱好者' }
])
</script>

场景 2：评论输入 + 评论列表组件

父组件：评论列表组件，负责管理所有评论数据
子组件：评论输入组件，负责接收用户输入的评论内容
传值方式：子组件通过自定义事件将用户输入的评论内容传递给父组件，父组件将新评论添加到评论列表中

1. 子组件：`CommentInput.vue`

javascript 复制代码

<template>
  <div>
    <textarea v-model="content" placeholder="写下你的评论..." rows="3"></textarea>
    <button @click="handleSubmit">发表评论</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const emit = defineEmits(['add-comment'])
const content = ref('')
const handleSubmit = () => {
  if (!content.value.trim()) return
  emit('add-comment', content.value.trim())
  content.value = ''
}
</script>

2. 父组件：`CommentList.vue`

javascript 复制代码

<template>
  <div>
    <h3>评论区 ({{ comments.length }})</h3>
    <CommentInput @add-comment="addComment" />
    
    <div v-if="comments.length > 0">
      <div v-for="(comment, index) in comments" :key="index">
        <p>{{ comment }}</p>
      </div>
    </div>
    
    <div v-else>暂无评论，快来抢沙发吧！</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CommentInput from './CommentInput.vue'
const comments = ref<string[]>(['写得太好了，学到了很多！', '感谢分享，收藏了'])
const addComment = (newComment: string) => {
  comments.value.push(newComment)
}
</script>

场景 3：分类筛选 + 文章列表组件

父组件：文章列表组件，负责根据分类筛选文章
子组件：分类筛选组件，负责展示所有分类并接收用户的选择
传值方式：子组件通过自定义事件将用户选择的分类传递给父组件，父组件根据分类重新获取文章数据

子组件：CategoryFilter.vue

javascript 复制代码

<template>
  <div>
    <span>文章分类：</span>
    <button 
      v-for="category in categories" 
      :key="category"
      @click="handleSelect(category)"
    >
      {{ category }}
    </button>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  categories: {
    type: Array as () => string[],
    required: true
  },
  currentCategory: {
    type: String,
    required: true
  }
})
const emit = defineEmits(['change-category'])
const handleSelect = (category: string) => {
  emit('change-category', category)
}
</script>

2. 父组件：`BlogPage.vue`

javascript 复制代码

<template>
  <div>
    <h1>我的博客</h1>
    <CategoryFilter 
      :categories="categories"
      :current-category="currentCategory"
      @change-category="handleCategoryChange"
    />
    <ArticleItem 
      v-for="article in filteredArticles" 
      :key="article.id" 
      :article="article"
    />
    <div v-if="filteredArticles.length === 0">该分类下暂无文章</div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import CategoryFilter from './CategoryFilter.vue'
import ArticleItem from './ArticleItem.vue'
const categories = ref(['全部', 'Vue', 'TypeScript', '前端工程化'])
const currentCategory = ref('全部')
const allArticles = ref([
  { id: 1, title: 'Vue3 组合式API入门指南', summary: '本文将带你快速了解Vue3组合式API的核心概念。', createTime: '2024-05-20', author: '前端小课堂', category: 'Vue' },
  { id: 2, title: 'Pinia状态管理最佳实践', summary: 'Pinia是Vue3官方推荐的状态管理库。', createTime: '2024-05-18', author: 'Vue开发者', category: 'Vue' },
  { id: 3, title: 'TypeScript基础语法详解', summary: '本文将系统介绍TypeScript的基础语法。', createTime: '2024-05-15', author: 'TS爱好者', category: 'TypeScript' },
  { id: 4, title: 'Vite配置完全指南', summary: 'Vite是新一代前端构建工具。', createTime: '2024-05-10', author: '工程化专家', category: '前端工程化' }
])
const filteredArticles = computed(() => {
  if (currentCategory.value === '全部') return allArticles.value
  return allArticles.value.filter(article => article.category === currentCategory.value)
})
const handleCategoryChange = (category: string) => {
  currentCategory.value = category
}
</script>

4、整合运行（`App.vue`）

javascript 复制代码

<template>
  <div>
    <ArticleList />
    <hr />
    <CommentList />
    <hr />
    <BlogPage />
  </div>
</template>
<script setup>
import ArticleList from './components/ArticleList.vue'
import CommentList from './components/CommentList.vue'
import BlogPage from './components/BlogPage.vue'
</script>

六、学习路径建议：新手如何快速掌握

先吃透基础：不要急于学习进阶内容，先把 Props 和自定义事件这两个基础方式练熟。这两个能解决 90% 的父子组件传值问题。
动手写最小化 demo：每个知识点都写一个最简单的 demo 来验证。比如先写一个父组件传递数字给子组件的例子，再写一个子组件点击按钮通知父组件的例子。
学会使用 Vue DevTools：Vue DevTools 是调试组件通信的神器。通过它你可以清晰地看到每个组件的 Props、事件和状态，快速定位数据传递的问题。
多看官方文档：Vue 的官方文档写得非常详细和准确，是最好的学习资料。遇到问题先查官方文档，再去搜索引擎。
不要过早学习复杂方式：在没有把父子组件传值练扎实之前，不要去学 provide/inject、Pinia 等跨层级和全局状态管理方式。基础打牢了，再学进阶内容会非常轻松。

七、总结：一张表搞定传值选择

最后，我们用一张表格来总结不同场景下应该选择的传值方式，方便大家快速查阅。

场景	推荐传值方式
父组件向子组件传递数据	Props
子组件需要修改父组件的数据	自定义事件
实现自定义表单输入组件	v-model
父组件需要主动调用子组件的方法	ref + defineExpose
祖孙组件跨层级传值	provide/inject
多个组件共享全局数据	Pinia

父子组件传值是 Vue 开发中最基础也是最重要的技能之一。只要你理解了单向数据流的核心原则，熟练掌握了 Props 和自定义事件的使用，再结合实际项目不断练习，就一定能轻松应对各种组件通信的需求。

Vue3父子组件传值：从零到精通

一、先懂原则：单向数据流是灵魂

二、核心传值方式：90% 场景都用这两个

1. 父传子：Props - 数据的 "向下传递"

2. 子传父：自定义事件 - 数据的 "向上通知"

三、进阶用法：让代码更简洁高效

1. v-model：双向绑定的语法糖

2. 父调用子：主动获取子组件能力

四、新手避坑：最容易犯的 5 个错误

五、实战场景解析：博客系统中的父子组件

场景 1：文章列表 + 文章项组件

1. 子组件：ArticleItem.vue

2. 父组件：ArticleList.vue

场景 2：评论输入 + 评论列表组件

1. 子组件：CommentInput.vue

2. 父组件：CommentList.vue

场景 3：分类筛选 + 文章列表组件

2. 父组件：BlogPage.vue

4、整合运行（App.vue）

六、学习路径建议：新手如何快速掌握

七、总结：一张表搞定传值选择

1. 子组件：`ArticleItem.vue`

2. 父组件：`ArticleList.vue`

1. 子组件：`CommentInput.vue`

2. 父组件：`CommentList.vue`

2. 父组件：`BlogPage.vue`

4、整合运行（`App.vue`）