vue组件props默认值需按类型区分：基础类型直写默认值，对象数组须用函数返回新实例，typescript项目推荐withdefaults配合接口声明，并可用computed合并传入值与默认值。

Vue 组件中设置 props 默认值，关键在于区分数据类型和使用场景——基础类型可直写，对象数组必须用函数返回，而 TypeScript 项目推荐用 withDefaults 配合接口声明。

基础类型默认值：直接赋值最安全

字符串、数字、布尔值等原始类型没有引用共享问题，可以直接写死默认值：

• title: { type: String, default: '未命名' }
• count: { type: Number, default: 1 }
• enabled: { type: Boolean, default: true }

这类写法简洁明确，开发时控制台也不会报错，适合大多数静态配置项。

对象和数组默认值：必须用函数包裹

如果直接写 default: {} 或 default: []，多个组件实例会共用同一份内存地址。一个实例修改了这个对象，其他实例的 props 也会跟着变，造成隐蔽的数据污染。

正确做法是让 default 返回一个新对象或新数组：

Vue-router参考手册

Vue-router参考手册下载

下载

• config: { type: Object, default: () => ({ apiBase: '/api', timeout: 5000 }) }
• items: { type: Array, default: () => ['默认项'] }

函数执行时机在组件初始化时，每次创建实例都调用一次，确保隔离性。

TypeScript 项目推荐：withDefaults + 接口

Vue 3 中更现代、更类型友好的写法是结合 defineProps 和 withDefaults：

• 先定义纯 TypeScript 接口描述 props 结构
• 再用 withDefaults 注入默认值，TS 能完整推导类型，IDE 补全和错误提示更准

示例：

const props = withDefaults(defineProps(), {
  label: '请选择',
  disabled: false,
  options: () => ['选项1', '选项2']
});

需要合并传入值与默认值？用 computed 处理

有时父组件只传了部分字段（比如只传了 paramsObj.showHandleCol，没传 tabList），但子组件希望“有则用，无则补默认”。这时 default 不起作用，得手动合并：

• 把 props 的对象类型 default 设为空对象：paramsObj: { type: Object, default: () => ({}) }
• 再用 computed 做深合并或浅合并：

computed: {
  finalParams() {
    return {
      tabList: [],
      showHandleCol: false,
      ...this.paramsObj
    }
  }
}

这样既保留父组件传入的字段，又自动填充缺失的默认项。

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