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

 <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
      }
    },
Logo

前往低代码交流专区

更多推荐