vue+element-plus 父组件校验子组件的form表单

可以通过在父组件中引用子组件并调用子组件的方法来实现校验子组件的form表单。

首先，在子组件中暴露一个校验方法，例如：

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <!-- 表单内容 -->
  </el-form>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: this.value,
      rules: {
        // 表单校验规则
      }
    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(this.formData);
          } else {
            reject(new Error('表单校验失败'));
          }
        })
      })
    }
  }
}
</script>

然后，在父组件中引用子组件，并调用子组件的校验方法，例如：

<template>
  <div>
    <child-component v-model="formData" ref="child"></child-component>
    <el-button type="primary" @click="validate">校验表单</el-button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      formData: {},
    }
  },
  methods: {
    async validate() {
      try {
        const childFormData = await this.$refs.child.validate();
        // 表单校验成功，可以对子组件的表单数据进行操作
      } catch (error) {
        // 表单校验失败，可以进行相关处理
      }
    }
  }
}
</script>

在父组件中，引用子组件并调用子组件的validate方法可以校验子组件的表单，如果校验成功，则返回子组件的表单数据，可以对其进行操作；如果校验失败，则可以进行相关处理。