高复用组件的Props契约核心是“开箱即用、按需定制、错得明白”，需明确类型与必填性、用default工厂函数处理引用类型、通过validator补充业务校验。
高复用组件的 Props 契约，核心是让组件“开箱即用、按需定制、错得明白”。它不是简单罗列属性，而是通过清晰的声明、合理的约束和明确的意图表达，降低使用者的理解与使用成本。
明确类型与必填性，避免运行时隐式错误
用对象语法定义 props，为每个字段指定 type 和 required，是最基础也最关键的契约动作。Vue 会在开发环境自动校验并报错，把问题拦截在控制台里，而不是等到页面渲染异常才暴露。
- name: { type: String, required: true } —— 表明该组件没有 name 就无法工作，使用者必须传
- size: { type: String, default: 'medium' } —— 表明 size 是可选的，不传就用 medium，且只接受字符串（如 'small'/'large'）
- onConfirm: { type: Function, default: () => {} } —— 明确要求传入函数，同时提供空函数兜底，防止未传时调用报错
用 default 工厂函数处理引用类型
数组、对象等引用类型不能直接写默认值，否则所有实例会共享同一份内存。必须用函数返回新副本：
- items: { type: Array, default: () => [] }
- config: { type: Object, default: () => ({ theme: 'light', spacing: 12 }) }
这样每次组件初始化都获得独立的默认数据，避免父子组件或多个实例间意外污染。
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
加入 validator 提升语义严谨性
当类型不足以表达业务规则时，validator 可以补充逻辑校验。比如一个按钮组件要求 icon 名必须是预设集合中的值：
- icon: { type: String, validator: val => ['search', 'close', 'download'].includes(val) }
- level: { type: Number, validator: n => n >= 1 && n —— 表示只接受 1~5 的等级数字
这类校验让 props 的“契约感”更强——不只是“能传什么”，更是“该传什么”。
命名与文档对齐，降低认知负担
props 名称应直白反映用途，避免缩写或内部代号；搭配注释说明使用场景和边界条件：
- 用 showCloseButton 而不是 scb 或 canClose
- 在注释中注明：// 是否显示右上角关闭按钮，默认 true；设为 false 时将隐藏且不触发 close 事件
如果配合 TypeScript，还可以用类型别名或接口进一步固化契约，例如 type AlertType = 'info' | 'warning' | 'error'，再用于 props 定义中。
