setup 中如何用 defineProps 获取数据？父子组件通信实战教程

本文深入解析 Vue 3 中 defineProps 的本质与正确用法——它并非“从 setup 获取数据”的工具，而是编译时宏，用于在 setup 顶层安全、类型友好地声明并响应式接收父组件传递的 props；文章通过清晰对比对象声明与 TypeScript 类型推导两种方式，结合父子组件通信实战（如 v-model:xxx 语法糖背后的 update:xxx 事件机制），手把手演示如何规范传值、避免解构丢失响应性、禁止直接修改只读 props，并纠正常见误区，助你夯实 Composition API 核心基础，写出更健壮、可维护的 Vue 组件。

defineProps 是 Vue 3 Composition API 中用于在 setup() 函数中声明和接收父组件传入 props 的核心工具。它不是“从 setup 里拿数据”的方法，而是让 setup 能安全、类型友好地访问父组件传递的属性。

✅ 正确理解 defineProps 的作用

它本质是一个编译时宏（macro），会在构建阶段被处理，生成响应式 props 对象。你不能把它当成普通函数调用或异步获取数据的手段——它只在 setup 顶层同步执行，且必须显式声明要接收哪些 props。

? 基础用法：声明并使用 props

在子组件的