Vue如何将对象类型Props与默认值进行合并？

要实现传入部分title属性时与默认值自动合并，你需要在withDefaults的工厂函数中利用传入的props参数，结合Object.assign或对象展开运算符来合并默认值与用户传入的属性。具体操作如下：

1. 调整Props类型定义 #

首先修改Props接口，将title中的type设为可选属性，允许用户只传入text：

export interface Props {
  title: {
    type?: 'h1' | 'h2' // 设为可选，支持仅传入text
    text: string
  }
}

2. 在withDefaults中实现合并逻辑 #

通过工厂函数接收传入的props，将默认的type: 'h2'与用户传入的title对象合并：

方法一：使用Object.assign #

withDefaults(defineProps<Props>(), {
  title: (props) => {
    // 用默认type补全缺失属性，用户传入的type会优先保留
    return Object.assign({ type: 'h2' }, props.title)
  },
})

方法二：使用对象展开运算符（更简洁） #

withDefaults(defineProps<Props>(), {
  title: (props) => ({
    type: 'h2',
    ...props.title // 展开用户传入的属性，同名属性会覆盖默认值
  })
})

原理说明 #

• 原写法直接返回固定默认对象，无法与用户传入的属性合并；而通过工厂函数接收props参数，可获取用户传入的title部分属性。
• Object.assign和展开运算符都会实现属性合并：若用户传入了type，则会覆盖默认的h2；若仅传text，则保留默认的type: 'h2'。

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