背景
公司项目中所用到的前端框架是Vue.js + ElementUI，因为项目的业务场景中有很多的大表单，但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便，常常把多个表单写在一个.vue组件中，这导致单文件的代码量巨大，逻辑十分复杂。目前为了维护方便，表单的拆分就变得十分重要。
现在做了以下的Demo说明我们的业务场景，父组件是App.vue，该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件（在实际的业务场景中，可能多达10+表单）。【提交】按钮在父组件App.vue中，当点击【提交】按钮后，应该分别校验各个子组件，如果每个子组件都校验成功后再进行提交。
Demo
PersonForm.vue文件
下面的代码是PersonForm.vue组件，该表单包括姓名、年龄、性别。我们使用了PersonForm这个类去实例化组件中的personForm的值。在PersonForm中有个static方法getRule去获取校验方法去获取校验对象，该校验对象是ElementUI要求的写法，会在<el-form>的rules中定义。
<template>
<div class="person-form">
<h2>PersonForm.vue</h2>
<el-form :model="personForm" ref="personForm" :rules="personFormRules">
<!-- 姓名 -->
<el-form-item label="姓名" prop="name">
<el-input v-model="personForm.name"></el-input>
</el-form-item>
<!-- 年龄 -->
<el-form-item label="年龄" prop="age">
<el-input v-model="personForm.age"></el-input>
</el-form-item>
<!-- 性别 -->
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="personForm.sex">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
</template><script>
import {validateName, validateAge, validateSex } from '@/lib/validator.js';
// PersonForm的类
class PersonForm {
constructor() {
this.name = '';
this.age = null;
this.sex = null;
}
static getRule() {
return {
name: [{ validator: validateName, trigger: 'blur' }],
age: [{ validator: validateAge, trigger: 'blur' }],
sex: [{validator: validateSex, trigger: 'blur'}],
}
}
}
export default {
data() {
return {
personForm: new PersonForm(),
personFormRules: PersonForm.getRule()
}
}
}
</script>
<style>
.person-form {
width: 400px;
