defineprops 是 vue 3 sfc 中声明 props 的标准方式，需在 内直接调用；支持数组（仅字段名）和对象（类型、默认值、校验）两种写法，后者更推荐；传非字符串字面量须用 : 绑定。

在 Vue 3 的单文件组件（SFC）中，defineProps 是声明子组件接收父组件传参的标准方式，必须写在 <script setup></script> 块内，无需 import，直接调用即可。

基础写法：数组形式（只列字段名）

适合快速开发或简单场景，仅指定允许接收的 prop 名称，不校验类型、不设默认值：

• const props = defineProps(['title', 'desc', 'isActive'])
• 模板中直接使用：{{ props.title }}
• 可解构使用：const { title, desc } = props（但注意会丢失响应性，见下文）

推荐写法：对象形式（支持类型、默认值与校验）

生产环境首选，健壮性强，配合 TypeScript 更安全：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 基本类型声明：title: String、count: Number、list: Array
• 多类型支持：propB: [String, Number]
• 必填标记：name: { type: String, required: true }
• 默认值（基础类型）：size: { type: Number, default: 14 }
• 默认值（引用类型需工厂函数）：config: { type: Object, default: () => ({ theme: 'light' }) }
• 自定义校验：age: { type: Number, validator: (val) => val >= 0 && val

搭配 TypeScript 的类型安全写法

先定义接口，再泛型传入，类型推导更精准，IDE 支持更好：

• interface Props { name: string; tags?: string[]; meta: Record<string any> }</string>
• const props = defineProps<props>()</props>
• 此时 props 具备完整类型提示，访问 props.name 不会报错，未定义字段无法访问

注意事项与常见陷阱

props 天然响应式，但修改和解构要谨慎：

• 子组件不能直接赋值修改 props（如 props.title = 'new'），会触发警告
• 需要修改时应通过 defineEmits 派发事件，由父组件更新
• 若需解构并保持响应性，用 toRefs(props) 或 computed(() => props.xxx)
• 传递数字、布尔、对象等非字符串字面量时，务必加 :（即 v-bind），例如 :count="10"，否则会被当字符串处理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！