vue异步更新与$nextTick

Question

用的element表单生成器

//生成器插件部分源码
submitForm() {
      this.$refs[this.formConf.formRef].validate(valid => {
        if (!valid) return false
        // 触发sumit事件
        this.$emit('submit', this[this.formConf.formModel])
        return true
      })
    }

<template>
  <div>
    <parser
      v-if="isDataReady"
      :form-conf="formConf"
      ref="parser"
      @submit="currFormSubmit"
    />
  </div>
</template>

<script>
import Parser from "form-gen-parser";
import {
  designDetail,
  formSave,
} from "../../../../api/formGenerator/api_formGenerator";
import { buildingOnLandSave } from "@/api/landBuild/yd.js"

export default {
  components: {
    Parser,
  },
  data() {
    return {
      formConf: null,
      refName: "parser",
      testData: null,
      isDataReady: false,
      formPerData: null,
      formModel: null, //当前表单标识
      formRef: null, //当前表单名称
      valid: false,//当前表单是否通过验证
    };
  },
  mounted() {
    this.designDetail()
  },
  methods: {
    designDetail() {
      designDetail({ formId: "6afef2143e229a999920d89a365c3402" }).then((res) => {
        if (res.code == 0) {
          this.formConf = JSON.parse(res.data.formDesign.setup);
          this.isDataReady = true;
          this.formPerData = res.data.formDesign;

          this.$nextTick(() => {
            this.$emit('getCode', this.findAreaCode());
          })
        }
      })
    },
    submitForm() {
      //表单验证
      this.$refs.parser.submitForm();
      console.log(this.valid)
      this.$nextTick(() => {
        console.log(this.valid)
        if (!this.valid) {
          this.$message.error('表单信息未填写或格式错误，请重新填写！')
            return [];
        }
        let formdata = this.$refs.parser[this.formModel];
        /**测试数据 */
        formdata.xzqdm = '36072310620701';
        return [formdata, this.$refs.parser.formConfCopy];
      })
    },
    //parser submit
    currFormSubmit() {
      this.valid = true;
    },
  },
};
</script>

假设表单验证通过
问： 第二页submitForm方法中的console打印结果？为什么？

Answer 1

为啥要这么做，element的表单验证方法是一个promise，你完全可以在子组件的提交的方法里面直接return 整个验证方法，外层能够接到一个promise对象的，
就算不用这种你也可以在调用子组件的对象的时候，传入一个函数，子对象内部校验通过后调用回调。