子组件表单未通过校验，父组件不允许提交

当子组件的表单未通过校验时，父组件可以通过监听子组件的校验状态来禁用提交按钮或者显示错误提示信息，以避免不合法的数据提交到后台。一种常用的方法是在子组件中定义一个事件，当子组件表单校验状态发生改变时，触发该事件并传递校验状态给父组件。父组件通过监听该事件来更新提交按钮的状态或者显示错误提示信息。具体实现方法可以参考以下示例代码：

子组件：

<template>
  <el-form ref="form" :model="formData" :rules="rules" @change="handleChange">
    <!-- 表单项 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {}, // 表单数据
      rules: {}, // 表单校验规则
      isFormValid: false, // 表单校验状态
    };
  },
  methods: {
    handleChange() {
      // 表单校验状态发生改变，触发事件通知父组件
      this.isFormValid = this.$refs.form.validate();
      this.$emit('form-change', this.isFormValid);
    },
  },
};
</script>

父组件：

<template>
  <child-form @form-change="handleFormChange"></child-form>
  <el-button :disabled="!isFormValid" @click="handleSubmit">提交</el-button>
</template>

<script>
import ChildForm from './ChildForm.vue';

export default {
  components: {
    ChildForm,
  },
  data() {
    return {
      isFormValid: false, // 子组件表单校验状态
    };
  },
  methods: {
    handleFormChange(isValid) {
      // 子组件表单校验状态发生改变，更新父组件状态
      this.isFormValid = isValid;
    },
    handleSubmit() {
      // 父组件提交逻辑
      if (this.isFormValid) {
        // 提交表单数据
      } else {
        // 显示错误提示信息
      }
    },
  },
};
</script>

在上述示例中，子组件通过 `handleChange` 方法监听表单项的变化，当表单校验状态发生改变时，触发 `form-change` 事件并传递校验状态给父组件。父组件通过监听 `form-change` 事件来更新 `isFormValid` 的状态，从而禁用或启用提交按钮。在提交表单时，父组件会检查表单的校验状态，如果校验通过则提交表单数据，否则显示错误提示信息。