vue父组件调用子组件的表单验证方法

需求：父组件调用子组件的表单验证方法，验证成功，继续进行接下来的操作，验证失败，提示用户并返回。
一、在父组件中引入子组件

 <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>

二、在父组件中点击【确 定】按钮调用方法

  async transformerConfirm(value) {
    //调用校验子组件的方法
      let flag = await this.$refs.alternatorRef.justify()
      //如果子组件校验方法返回ture，则接着进行其他操作，返回false则提示用户
      if (flag) {
  		//to do something
      } else {
        this.$message.warning('校验失败')
      }
    },

三、子组件中的校验方法

 async justify() {
 //校验成功则方法自动返回true，校验方法报错则说明校验失败，返回false
      try {
        return await this.$refs['ruleFormRef'].validate()
      } catch (error) {
        return false
      }
    },