vue 3 中 props 默认值与必填项设置需区分类型：基础类型可直接设 default 值；对象/数组必须用函数返回以避免引用共享；必填项设 required: true 且不可配 default；ts 项目推荐 withdefaults + 接口定义，类型安全且 ide 支持佳。

Vue 3 中设置 Props 的默认值和必填项，核心在于 defineProps 的配置方式。基础类型可直接赋默认值，对象/数组必须用函数返回；必填项通过 required: true 明确声明，不设默认值且父组件未传时会报警告。

基础类型默认值：直接写值即可

字符串、数字、布尔等基础类型，default 可以直接写静态值，安全且简洁：

• title: { type: String, default: '无标题' }
• count: { type: Number, default: 0 }
• disabled: { type: Boolean, default: false }

对象与数组默认值：必须用函数返回

如果默认值是对象或数组，**不能写 default: {} 或 default: []**，否则多个组件实例会共享同一引用，造成数据污染。正确做法是用箭头函数返回新副本：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• userInfo: { type: Object, default: () => ({ name: '', age: 0 }) }
• items: { type: Array, default: () => ['a', 'b'] }
• config: { type: Object, default: () => ({ theme: 'light', size: 'md' }) }

声明必填项：required 设为 true

某个 prop 必须由父组件传入时，设 required: true。此时不能同时设 default（否则逻辑冲突），Vue 运行时会在控制台发出警告：

• id: { type: [String, Number], required: true }
• onSubmit: { type: Function, required: true }
• 若父组件未传，控制台提示 “Missing required prop: 'xxx'”

TypeScript + withDefaults 推荐写法

在 TS 项目中，更推荐用 withDefaults 配合接口定义，类型更清晰、无 PropType 断言负担：

• 先定义接口：interface Props { title?: string; list: number[]; }
• 再用 withDefaults：const props = withDefaults(defineProps<props>(), { title: '默认标题', list: () => [1, 2, 3] })</props>
• 好处：类型推导完整，IDE 支持好，default 函数写法自动被约束

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