组件通信

你将学会什么

用 props 实现父组件向子组件传数据
用 $emit 实现子组件向父组件回传事件
判断什么时候该拆分组件，什么时候再引入更重的状态方案

正文

当你把项目从单页面扩展成多组件时，最常见的问题是“父组件怎么传数据，子组件怎么回传事件”。最小可用模式是：

父传子：props
子传父：$emit
更复杂状态：再补 Pinia 或 provide/inject

一个最小示例：父组件把课程名通过 props 传下去，子组件点击按钮后用 $emit 通知父组件。

<!-- 父组件 -->
<script setup lang="ts">
import CourseCard from './CourseCard.vue'

const title = 'Vue3 快速入门'
</script>

<template>
  <CourseCard :title="title" @select="(msg) => console.log(msg)" />
</template>

<!-- 子组件 CourseCard.vue -->
<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ select: [msg: string] }>()
</script>

<template>
  <button @click="emit('select', '已选择：' + title)">{{ title }}</button>
</template>

学生项目里，你不需要一开始就把状态管理全家桶学完，先把 props 和 emit 用顺，足够应付课程作业和课程设计。组件拆分也不是“一开始就要拆”，而是“同一段逻辑或 UI 在第二处出现时，就该考虑拆了”。常见适合拆分的信号：多个页面出现相同卡片结构、表单校验逻辑越来越长、父子之间开始频繁传事件。拆分时不要求“一次做到完美”，只要让组件职责变清晰，后续扩展会容易很多。

动手练

知识检查

先自己回答，再看答案：

父子组件通信的最小模式是什么？
什么情况下才需要考虑 Pinia 或 provide/inject？
什么信号说明该拆组件了？

参考答案

父传子用 props，子传父用 $emit。
需要跨组件共享状态、props 传递链变得很深时，再考虑更重的状态方案。
相同结构出现第二处、校验逻辑变长、父子频繁传事件。

本节小结

父子通信最小模式：props 下行、$emit 上行
复杂共享状态再考虑 Pinia 或 provide/inject
拆组件看信号，不追求一次完美，先让职责清晰

组件通信小测

1 / 3

子组件向父组件传递事件时，最小可用模式是？

$emitpropsPiniav-model 自动完成