defineProps 是 Vue 3 中声明子组件接收父组件传参的标准方式，支持类型安全、默认值、必填校验和自定义验证；推荐使用对象形式或 TypeScript 泛型写法，避免直接解构丢失响应性。
在 Vue 3 的 `<script setup>` 中，`defineProps` 是声明子组件接收父组件传参的标准方式，无需 import，直接调用即可。它支持类型安全、默认值、必填校验和自定义验证，是父子通信的基础环节。</script>
基础写法：数组形式（适合快速开发）
只关心 prop 名称、不涉及类型或校验时可用，简洁但功能有限：
- 语法：
const props = defineProps(['title', 'desc']) - 模板中直接使用：
{{ props.title }}或解构后使用（注意：解构会丢失响应性，见下文） - 适用场景：内部小工具组件、原型阶段、属性极少且无约束的组件
推荐写法：对象形式（生产环境首选）
可完整定义类型、默认值、是否必填和校验逻辑，尤其配合 TypeScript 更可靠：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 指定类型：
type: String、type: Number、type: Object、type: Array等 - 设默认值：
default: '默认标题'；引用类型需函数返回，如default: () => [] - 标记必填：
required: true，未传时控制台发出警告 - 自定义验证：
validator: (val) => typeof val === 'string' && val.length > 0
TypeScript + defineProps（类型推导最准）
定义接口后传入泛型，VS Code 能精准提示、自动补全，避免运行时错误：
- 写法示例：
interface Props {<br> name: string;<br> age?: number;<br> tags: string[];<br>}<br>const props = defineProps<props>();</props>- 也可用内联类型：
defineProps() - 带默认值时，用
withDefaults配合泛型更清晰：withDefaults(defineProps(), { age: 18, tags: () => ['web'] })
使用注意事项
props 天然响应式，但不可修改，且解构需谨慎：
- 子组件不能直接赋值修改：
props.name = 'new'会报警告 - 需要修改时，应通过
defineEmits触发事件通知父组件更新 - 若要在 script 中解构使用，必须用
toRefs(props)或computed(() => props.xxx)保持响应性 - 模板中可直接写
{{ title }}（Vue 会自动从 props 解析），无需加props.前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
