父组件检验子组件表单

子组件：子组件 ( ChildRules ) 中正常写校验规则

<el-form :model="ruleForm" ref="ruleForm" label-width="120px">
  <el-form-item label="物业公司名称：" prop="property.company_name" :rules="{ required: true, message: '物业公司名称不能为空', trigger: 'blur' }">
    <el-input v-model="ruleForm.property.company_name" placeholder="" clearable></el-input>
  </el-form-item>
    
  <el-form-item label="邮箱：" prop="property.company_email" :rules="[{ required: true, message: '请填写邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]" class="mt-10">
    <el-input v-model="ruleForm.property.company_email" placeholder="" clearable></el-input>
  </el-form-item>
</el-form>

子组件正常校验

// 校验数据
validateForm () {
  let flag = null
  this.$refs['ruleForm'].validate(valid => {
    if (valid) {
      flag = true
    } else {
      flag = false
    }
  })
  return flag
}

父组件:

<child-rules ref="childRules"></child-rules>

<script>
  let flag = this.$refs['childRules'].validateForm()
</script>