在 中直接调用 defineprops() 声明 props，支持对象形式（指定 type/required/default）和 ts 类型推导（如 defineprops()），props 只读且不可解构，配合 defineemits 可实现 v-model 双向绑定。
直接在 <script setup></script> 中调用 defineProps() 就能声明组件接收的 props，不需要 import，也不用 return，Vue 会自动处理类型和响应性。
基础写法：对象形式声明
适合明确字段名、类型和默认值的场景。语法简洁，开发时有良好提示：
-
type 指定数据类型（支持 String、Number、Boolean、Array、Object、Function、Date、Symbol，也可用联合类型如
[String, Number]） -
required 设为
true表示必传，不填则默认 false - default 设置默认值；注意 Object/Array 类型必须用函数返回（避免引用共享）
示例：
<script setup>
const props = defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
},
list: {
type: Array,
default: () => []
}
})
</script>
TS 类型推导写法（推荐）
如果你用 TypeScript，可以直接传入接口或类型字面量，更精准且 IDE 支持更好：
<script lang="ts" setup>
interface Props {
name: string
age?: number
tags: string[]
onConfirm: (id: number) => void
}
const props = defineProps<Props>()
</script>
这样 props 的每个字段都有完整类型检查，函数参数、可选字段、联合类型都一目了然。
注意事项和常见误区
这些细节容易忽略，但直接影响功能和稳定性：
- props 是只读的（
readonly），不能直接赋值，比如props.count = 10会报错；需要修改时应通过事件通知父组件 - 不要解构 props 对象，否则会丢失响应性：
const { title } = props❌；应始终通过props.title访问 ✅ - 如果用了
defineProps，父组件传来的同名属性就进props；没声明的属性则落到useAttrs()里，不会自动合并 - 不声明 props 也能接收数据，但失去类型校验、IDE 提示和默认值能力，不建议用于生产环境
配合 v-model 的简化写法
当组件要支持 v-model（比如表单控件），可以用 useVModel 或直接用 defineProps + defineEmits 配合实现双向绑定：
<script setup>
const props = defineProps({
modelValue: {
type: [String, Number],
default: ''
}
})
const emit = defineEmits(['update:modelValue'])
const updateValue = (val) => {
emit('update:modelValue', val)
}
</script>
这样父组件就能用 <myinput v-model="text"></myinput>，子组件内部调用 updateValue(newVal) 即可同步数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
