Vue3组合式API（TS）中默认Props未生效，值为undefined

你当前的写法是给整个config对象设置默认值，只有当父组件完全不传递config时，才会启用这个完整的默认对象。一旦父组件传递了包含部分属性的config（哪怕只传了urls和labels），Vue就会直接使用这个传入的对象，不会自动合并默认对象里的switchView、activeView等嵌套属性。

方案1：拆分嵌套属性为独立Props（推荐，更符合Vue Prop设计） #

把config内部的属性拆成单独的Prop，这样每个属性都能独立设置默认值，Vue会自动处理单个属性的默认值生效逻辑：

interface Props {
  switchView?: boolean;
  activeView?: number;
  urls: { someUrl: string };
  labels?: { someLabel: string };
}

const props = withDefaults(defineProps<Props>(), {
  switchView: true,
  activeView: 0,
  labels: () => ({ someLabel: '' })
});

父组件调用时直接传递对应属性即可：

// 父组件代码
const urls = { someUrl: '/example' };
const labels = { someLabel: 'Example label' };

<!-- 父组件模板 -->
<YourComponent :urls="urls" :labels="labels" />

方案2：手动合并默认值（保留config嵌套结构） #

如果必须保留config对象结构，需要在组件内部手动将传入的config和预设的默认配置合并，确保缺失的属性补全默认值：

interface Props {
  config?: {
    switchView?: boolean;
    activeView?: number;
    urls?: { someUrl: string };
    labels?: { someLabel: string };
  };
}

// 定义基础默认配置
const defaultConfig = {
  switchView: true,
  activeView: 0,
  urls: { someUrl: '' },
  labels: { someLabel: '' }
};

// 给config设置空对象作为默认，确保即使不传也能进入合并逻辑
const props = withDefaults(defineProps<Props>(), {
  config: () => ({})
});

// 递归合并嵌套对象，避免直接覆盖整个子对象
const mergedConfig = {
  ...defaultConfig,
  ...props.config,
  urls: { ...defaultConfig.urls, ...props.config?.urls },
  labels: { ...defaultConfig.labels, ...props.config?.labels }
};

之后组件内部使用mergedConfig即可获取包含默认值的完整配置。

内容的提问来源于stack exchange，提问作者Bushima