需求1：父组件调用子组件的表单验证方法，验证成功，继续进行接下来的操作，验证失败，提示用户并返回。
需求2：父组件校验多个子组件的表单验证方法，验证成功，继续进行接下来的操作，验证失败，提示用户并返回。
需求1，代码如下：
1，在父组件中引入子组件
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="50%"
:before-close="handleClose"
>
<exciter-edit ref="alternatorRef" />
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="transformerConfirm(insEdit)"
>确 定</el-button
>
</span>
</el-dialog>
2，子组件中的校验方法
方法一：
async justify() {
//校验成功则方法自动返回true，校验方法报错则说明校验失败，返回false
try {
return await this.$refs['ruleFormRef'].validate()
} catch (error) {
return false
}
}
方法二：
validate(callback){
//这个form是子组件内部 el-form 的 ref="contentForm"
this.$refs.contentForm.validate((valid) => {
callback(valid)
})
}
3，在父组件中点击【确 定】按钮调用方法
方法一：调用子组件校验方法判断：
async transformerConfirm(value) {
//调用校验子组件的方法
let flag = await this.$refs.alternatorRef.justify()
//如果子组件校验方法返回ture，则接着进行其他操作，返回false则提示用户
if (flag) {
//to do something
} else {
this.$message.warning('校验失败')
}
}
方法二：通过调用子组件form方法进行验证：
async transformerConfirm(value) {
//调用校验子组件的方法
this.$refs['contentForm'].validate((valid) => {
if (valid) {
...}
}
}
需求2，代码如下：
1，如果是父组件校验多个子组件
saveData(flag){
const a1 = new Promise((resolve, reject) => {
this.$refs.contentForm.validate((valid) => {
if (valid) resolve()
})
})
const a2 = new Promise((resolve, reject) => {
this.$refs.pageForm.validate((valid) => {
if (valid) resolve()
})
})
Promise.all([a1, a2]).then(() => {
//全部验证通过
//写保存方法
})
},