引言

在工作中我经常需要处理一些复杂、动态表单，但是随着需求不断迭代，我们也许会发现曾经两三百行的 .vue 文件现在不知不觉到了两千行，三千行，甚至更多...

这对于一个需要长期维护的项目，无疑是增加了很多难度。

因此，为了减小文件大小，优化表单组织的结构，我在日常的开发中实践出一种基于组件的表单拆分方法，同时还能保证所有的表单项是处于同一个 el-form 中。

这对于一个一开始就没有做好文件组织，组件化的项目，有以下几个优点：

1. 改动小！后续新增表单项基本不会改动以前的代码
2. 基于组件！在逻辑上对表单项做出拆分，并在任何地方嵌入
3. 易维护！化单个大组件为多个小组件，每个组件只专注于一部分表单。

表单拆分

接下来我们会通过完成一个实际表单的方式来介绍如何实践这种表单组织方式。

以 element-ui 文档中的这个 表单 为例，接下来尝试用我们的方式来实现

首先假设我们当前有一个 vue 文件 ./form/myForm.vue