自定义组件设计

自定义组件的目标是把重复 UI 和交互封装起来，让页面更清晰。组件不要只追求“能复用”，还要保证输入输出明确、状态可控、样式不互相污染。

设计流程

flowchart TD
    A[识别重复场景] --> B[抽出输入参数 props]
    B --> C[定义事件 emits]
    C --> D[拆分插槽 slots]
    D --> E[处理状态和边界]
    E --> F[编写示例和文档]

组件边界

内容	建议
props	外部传入的数据和配置
emits	组件向外通知的事件
slots	留给调用方自定义的区域
expose	只暴露必要方法
style	使用局部样式或命名空间

常见问题

1. 组件内部直接请求接口，导致复用时难以替换数据源。
2. props 过多，说明组件承担了太多职责。
3. 事件命名不清晰，调用方不知道什么时候触发。
4. 样式选择器太宽，影响页面其他区域。

建议

业务强相关组件可以放在业务目录，通用组件再放公共组件库。不要一开始就追求完全通用，先让边界清晰，再根据真实重复场景抽象。