基础组件 Props 应用 TypeScript 接口明确定义，命名统一为[ComponentName]Props，必填不加?、可选显式标注，禁用 any/Object，按需拆解传入字段，配运行时校验与默认值，并预留扩展字段如 extraClass、ariaLabel 等。
基础组件的 Props 接口不是参数列表，而是组件对外承诺的契约。设计得好，父组件传得安心、子组件收得明确、后续扩展不撕代码。
用 TypeScript 接口定义结构，而不是松散对象
直接在组件中写 defineProps({ title: String }) 看似简单，但缺乏类型提示、无法复用、IDE 补全弱、协作成本高。正确做法是单独声明接口：
- 命名统一为
[ComponentName]Props（如ButtonProps），便于全局搜索和文档生成 - 必填属性不加
?，可选属性显式标注，例如：size?: 'sm' | 'md' | 'lg' - 枚举值、联合类型、函数签名都写进接口，比如：
onClick?: (e: MouseEvent) => void - 避免
any或Object，宁可用Record<string unknown></string>或更具体的类型
拆解复杂数据，拒绝“一股脑传整个对象”
把 user: Object 当 props 传进来，看似省事，实则埋下三颗雷：子组件不知道该用哪些字段、父组件改了深层属性会意外触发重渲染、单元测试难覆盖。应按使用意图拆解：
- 只暴露子组件真正需要的字段，比如传
userName和userAvatar，而非整个user - 如果字段来自同一来源（如后端返回的 user 对象），可在父组件做映射：
<UserCard :name="user.name" :avatar="user.avatar" /> - 需保留原始结构用于内部处理？用
computed(() => ({ ...props }))封装，不直接响应式绑定深层嵌套
运行时校验 + 默认值兜底，不依赖开发自觉
TypeScript 只在编译期起作用，生产环境仍可能收到非法值。Vue 的 props 运行时校验是最后一道防线：
- 所有可选 props 都配
default，函数用() => []，对象用() => ({}) - 对关键取值范围加
validator，例如：status: { type: String, validator: v => ['idle', 'loading', 'success', 'error'].includes(v) } - 数字类 props 显式限制边界：
min: 0, max: 100或在 validator 中判断 - 字符串长度、URL 格式等业务约束，也放在 validator 里，而不是等渲染时报错
预留扩展位：为未来留出语义化入口
一个“好扩展”的 Props 设计，不是堆功能，而是留通道：
- 预留通用配置字段，如
extraClass?: string、attrs?: Record<string any></string>，方便定制样式或透传原生属性 - 事件名统一前缀，如
onUpdate:、onSelect:，避免和原生事件冲突，也利于 v-model 自动识别 - 为将来可能的暗色模式、国际化、无障碍等留钩子，比如
ariaLabel?: string、locale?: string - 不轻易删字段——哪怕某版暂时不用，也保留在接口中并注释“reserved for future use”
