如何实现ElementUI中多个子组件表单的校验管理？

本文共计1432个文字，预计阅读时间需要6分钟。

背景：公司项目中使用的 frontend 框架是 Vue.js + ElementUI。原因：项目业务场景中有大量的大表格，但 ElementUI 的表格组件对于表格的分割和校验其实并不友好。初始项目：为了方便，常常直接使用 ElementUI 的表格组件。

背景

公司项目中所用到的前端框架是Vue.js + ElementUI，因为项目的业务场景中有很多的大表单，但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便，常常把多个表单写在一个.vue组件中，这导致单文件的代码量巨大，逻辑十分复杂。目前为了维护方便，表单的拆分就变得十分重要。

现在做了以下的Demo说明我们的业务场景，父组件是App.vue，该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件（在实际的业务场景中，可能多达10+表单）。按钮在父组件App.vue中，当点击按钮后，应该分别校验各个子组件，如果每个子组件都校验成功后再进行提交。

Demo

PersonForm.vue文件

下面的代码是PersonForm.vue组件，该表单包括姓名、年龄、性别。我们使用了PersonForm这个类去实例化组件中的personForm的值。