以下是基于Vue 3的可复用业务组件库设计方案，结合Props分层控制与插槽扩展机制的最佳实践：
一、组件库架构设计
1.分层结构
-
基础层：提供Button/Input等原子组件，通过标准化Props实现基础功能
-
业务层：组合基础组件形成SearchTable等复合组件，支持插槽扩展业务逻辑
-
布局层：处理页面级容器与动态布局，通过作用域插槽传递上下文数据
2.目录规范
components/
├── base/ # 基础组件
├── biz/ # 业务组件
├── layout/ # 布局组件
└── utils/ # 工具函数
二、Props分层控制策略
1.配置型Props
-
定义组件基础样式/行为，如size、type等枚举值
-
示例：按钮组件的variant="primary|dashed"配置
2.数据型Props
-
传递业务数据，如表格的columns和data-source
-
需严格类型校验：props: { data: { type: Array, required: true }}
3.回调型Props
- 通过@submit等事件实现父子通信，避免直接修改Props
三、插槽扩展机制
1.默认插槽
- 用于内容注入，如卡片组件的正文区域
<template>
<div class="card">
<slot>默认内容</slot>
</div>
</template>
2.具名插槽
- 精准控制插入位置，如表单的header和footer区域
<template #header="{ title }">
<h3>{{ title }}</h3>
</template>
3.作用域插槽
- 向父组件暴露子组件数据，如表格行的rowData
<template #item="{ data }">
<custom-render :item="data" />
</template>
四、组合式API优化
1.逻辑复用
- 使用setup()提取可复用的组合函数
// usePagination.js
export default () => {
const page = ref(1)
const handlePageChange = (num) => { ... }
return { page, handlePageChange }
}
2.插件化集成
- 通过app.use()注册全局组件和指令
五、样式系统设计
1.CSS变量控制
:root {
--primary-color: #1890ff;
--border-radius: 4px;
}
.btn {
background: var(--primary-color);
border-radius: var(--border-radius);
}
2.主题切换
- 通过Props注入主题配置实现动态换肤
六、开发规范
1. TypeScript支持
- 为Props和插槽定义接口类型
interface TableProps {
columns: Array<{ key: string; title: string }>
dataSource: Record<string, any>[]
}
2.文档生成
- 使用Vitepress自动生成组件API文档
该设计通过Props分层实现精细控制，结合插槽机制保证扩展性，符合开闭原则，适用于中大型项目的组件库建设。
