Vue 3组件库开发中如何定义易用的简写对象Props

点语法传对象属性的实现思路 #

Vue 原生模板语法不支持直接通过props.key形式的点语法给嵌套对象属性传值，你可以根据组件库的定位选两种可落地的实现方式：

• 拆分扁平化Props（最推荐，类型提示友好）
  不要把classes、colors定义为单个对象类型的Prop，把嵌套属性拆成顶层独立Props，比如对应classes.default定义class-default（小驼峰为classDefault）、对应classes.md定义class-md、对应colors.dark定义color-dark，用户传参时不需要写绑定表达式，直接传字符串即可。组件内部setup阶段再把这些零散的Prop组装成classes、colors结构供响应式逻辑使用，对TS、IDE自动补全最友好，没有额外运行时开销。
• 运行时解析attrs（保留点语法书写形式）
  如果一定要对齐你写的点语法书写习惯，可以不把这类嵌套属性注册为固定Props，直接通过useAttrs拿到所有透传属性，遍历key做正则匹配拆分，自己组装成目标嵌套对象。遍历过程中把带.的key按前缀拆分，比如classes.md拆分后把值存入result.classes.md，解析完成后把这些匹配到的key从透传属性里剔除，避免渲染到原生DOM上触发控制台警告。

任意自定义扁平化属性的实现 #

你说的直接接收dark/light/randomTheme这类任意自定义属性的需求，同样可以通过useAttrs实现：

1. 先列好组件的固定保留属性列表（比如class、style、原生事件名、组件内置固定Prop）
2. 遍历attrs时，所有不在保留列表里的键值对，全部归集到colors配置对象下，不管用户传的是预设主题名还是自定义的主题名，都可以直接读取使用
3. 兼容原有对象传参、点语法传参、扁平化传参三种形式时，做一次深合并即可，优先级按「扁平化属性 > 点语法属性 > 整体对象传参」设置，避免参数覆盖逻辑混乱

核心解析逻辑参考 #

<script setup>
import { computed, useAttrs } from 'vue'
// 先声明需要兼容的整体传参Props
const props = defineProps({
  classes: { type: Object, default: () => ({}) },
  colors: { type: Object, default: () => ({}) }
})
const attrs = useAttrs()
// 保留属性列表，这些属性不做自定义解析
const preserveAttrs = ['class', 'style', 'onClick', 'onChange']

const mergedConfig = computed(() => {
  const result = {
    classes: { ...props.classes },
    colors: { ...props.colors }
  }
  Object.entries(attrs).forEach(([key, value]) => {
    // 解析classes.xx点语法
    if (key.startsWith('classes.')) {
      const classKey = key.slice(8)
      result.classes[classKey] = value
      return
    }
    // 解析colors.xx点语法
    if (key.startsWith('colors.')) {
      const colorKey = key.slice(7)
      result.colors[colorKey] = value
      return
    }
    // 非保留属性全部归为自定义主题色
    if (!preserveAttrs.includes(key)) {
      result.colors[key] = value
    }
  })
  return result
})

// 后续业务逻辑直接使用mergedConfig.classes、mergedConfig.colors即可
</script>

注意：开发环境可以加一层轻量校验，比如类名属性的值必须是字符串，自定义主题色的值如果不符合色值格式就抛出控制台警告，降低用户的使用出错概率。

内容的提问来源于stack exchange，提问作者Arthur wegner wippel