可配置性与简洁性相辅相成：通过精简props、合理分层配置、善用插槽及响应式联动，实现“够用不冗余、清晰不简陋”的设计目标。
可配置性与简洁性不是对立关系，而是相辅相成的设计目标：配置项要“够用但不冗余”，接口要“清晰但不简陋”。关键在于用最少的 props 和最自然的结构，支撑住多数业务变体。
Props 设计：只暴露真正需要定制的点
避免把所有样式、行为、文案都做成 prop。重点保留高频可变维度，比如 size、variant、disabled、loading；而像边框粗细、阴影强度、过渡时长这类低频细节，应由主题或 CSS 变量统一控制。
- 每个 prop 都要有明确语义，不建议用
customStyle或extraProps这类模糊字段 - 提供合理默认值，让组件在无任何 prop 时也能正常渲染并符合基础设计规范
- 对字符串类 prop 使用
validator限定取值范围，提前拦截非法输入
插槽代替过度 props
当某个区域的内容结构多变（如按钮内的图标位置、表格列的渲染逻辑、弹窗 footer 的按钮组合），优先用具名插槽而非一堆布尔/字符串 props 控制显示逻辑。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 默认插槽处理主体内容，具名插槽（
header、footer、icon）接管定制区域 - 配合
v-bind="$attrs"透传原生属性，让父组件能直接控制子元素行为（如tabindex、autofocus） - 插槽中可通过
scope slot或v-slot:xxx="slotProps"向外暴露数据，实现内容与逻辑解耦
配置分层：基础 + 扩展 + 覆盖
把配置分成三层，适应不同颗粒度的需求：
立即学习“前端免费学习笔记（深入）”；
- 基础层：组件自身定义的 props，默认值 + 类型校验，满足 80% 场景
- 扩展层：通过 provide/inject 注入全局配置（如主题色、尺寸比例），避免逐层传递
-
覆盖层：支持单个实例传入高优配置对象（如
overrideConfig），局部屏蔽全局设置
事件与响应式联动：让配置“活”起来
配置不只是静态参数，还要能触发反馈和联动。例如：
- 点击按钮后 emit
click，同时内部自动触发loading状态切换（若传了autoLoading） - 监听
modelValue变化时，同步更新内部 input 的value和校验状态 - 用
watch或计算属性响应 props 组合变化，动态生成 class 或 style，而不是写一堆 if-else 分支
