Vue 表单组件拆分经验：可复用输入框不是把所有 props 都塞进去

做表单页面时，很多团队都会很快开始抽输入组件。

这方向没问题。文本框、下拉框、日期选择器这些东西确实值得复用。问题通常出在复用方式上：刚开始只是想统一样式，后面慢慢开始加校验、加联动、加提示、加布局控制，最后组件越做越胖。

先统一外观，再考虑行为

表单组件一开始最值得统一的，通常是这些：

• label 展示
• 错误提示
• 间距
• 基础交互样式

如果一上来就把业务校验、字段联动、接口逻辑一起塞进去，组件很快就会失去边界。

props 多到一定程度，复用就开始走样

一旦出现下面这种趋势，就要警觉了：

• showError
• validateOnBlur
• customRule
• layoutMode
• extraTip
• beforeChange

参数越来越多，看起来像组件更通用了，实际上往往说明它开始同时服务太多场景。

写在最后

Vue 表单组件做得稳不稳，关键不在于抽没抽，而在于抽象边界是不是克制。

输入组件最适合统一的是外观和基础交互，不该顺手把整个业务逻辑也吞进去。复用是为了减轻页面压力，不是为了再造一个更复杂的配置层。