vue3 element-plus form 父触发子form校验

在 Vue3 中使用 Element-Plus 进行表单验证时，可以通过 $refs 属性来触发子组件的表单校验。具体来说，可以在父组件中使用 $refs 属性获取子组件的引用，并调用其内置的 validate 方法来进行校验。

首先，在父组件中给子组件添加 ref 属性，如下所示：

<template>
  <el-form ref="childForm">
    <child-form ref="child" />
  </el-form>
</template>

其中，子组件的名称为 ChildForm，通过 ref 属性可以获取到子组件的引用，同时也需要在父组件中添加 ref="child"，以便在后续的代码中调用子组件的 validate 方法。

接下来，在父组件中通过 $refs 属性来获取子组件的引用，并调用其 validate 方法，如下所示：

methods: {
  submitForm() {
    const childForm = this.$refs.child.$refs.childForm
    childForm.validate(valid => {
      if (valid) {
        // 表单校验通过，执行提交操作
      } else {
        // 表单校验不通过，给出提示
      }
    })
  }
}

在上述代码中，通过 this.$refs.child.$refs.childForm 来获取子组件中的 el-form 表单，并调用其 validate 方法。该方法会返回一个布尔值，表示表单校验是否通过。根据校验结果，可以执行相应的操作。

需要注意的是，在调用 validate 方法时，需要传入一个回调函数，该函数会在表单校验完成后执行，其中 valid 参数表示表单校验是否通过。