부모 요소의 자식 요소에서 양식 유효성 검사 결과를 얻는 방법

1. 검증 방법

전체 양식의 유효성을 검사하는 메서드인 매개변수는 콜백 함수입니다. 검증이 완료된 후 콜백 함수가 호출되고 검증 성공 여부와 검증에 실패한 필드의 두 가지 매개변수를 전달합니다. 콜백 함수가 전달되지 않으면 약속이 반환됩니다.

참고: validate 매개변수는 비동기식 콜백 함수이므로 검증 후 결과를 얻으려면 promsie를 사용해야 합니다.

// 父元素
 <Son ref="sonRef"></Son>
 <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>

  async submitForm(){
      let result  = await this.$refs.sonRef.submitForm();
      console.log('返回的值为');
      console.log(result);
      },
// 子元素

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="年龄"
          prop="age"
          :rules="[
            { required: true, message: '年龄不能为空'},
            { type: 'number', message: '年龄必须为数字值'}
          ]"
        >
          <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
  submitForm() {
        return new Promise(resolve=>{
            this.$refs['numberValidateForm'].validate(
            (valid) => {
          if (valid) {
            resolve(this.numberValidateForm)
          } else {
           resolve(false)
          }
        });

        })

      },

결과:

1. 18을 입력할 때,

 2. 입력 상자가 비어 있는 경우: