Vue2中如何让父组件等待子组件完成数据回传？

我把大型表单拆分为多个组件，此处仅聚焦一对父子组件说明：每个子组件自行做验证，点击父组件提交按钮时，子组件向父组件回传数据。父组件定义了接收回传数据的方法，还在data()中实例化对象存储数据，但点击提交时，父组件的submit方法会在子组件emit完成前执行，导致接收数据的对象为空。

我不想把所有输入框合并成一个大表单，试过用setTimeout延迟提交逻辑，偶尔生效但非常不优雅，完全是靠延迟等待emit完成，既不规范也不可靠。求清晰合理的实现方式。

相关代码示例 #

父组件初始代码 #

<template>
  <!-- 子组件 -->
  <LabExposureType v-if="lab" 
                   @passLabExposureToParent="exposureOnSubmit">
  </LabExposureType>
  <div class="submitAndClear d-flex justify-center pb-3">
    <v-btn color="success" class="mr-4" @click="submit">submit</v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      exposureVals: {},      
      // 省略其他数据
    }
  },
  methods: {
    submit() {
      // 尝试收集数据，但此时exposureVals为空
      console.log('回传的exposure数据', this.exposureVals);
    },
    exposureOnSubmit(input) {
      this.exposureVals = input
    }
  }
}
</script>

补充的父组件代码 #

<LabExposureType v-if="lab" :labState="exposureState" v-model="standardNum" 
    @passLabExposureToParent="exposureOnSubmit">
</LabExposureType> 

子组件代码 #

<template>
  <v-text-field v-if="isStandardMethod" 
                v-model="standardNum" 
                label="Organization and Standard Number"
                class="text-caption primary--text" 
                required 
                :error-messages="standardNumErrors" 
                :value="modelValue" 
                @input="$emit('update:modelValue', $event.target.value)"
                @blur="$v.standardNum.$touch()"></v-text-field>
</template>

<script>
export default {
  props: ["labState", "modelValue"],
  emits: ['update:modelValue'],
  // 省略其他代码
}
</script>

方案1：父组件主动调用子组件方法获取数据 #

通过ref获取子组件实例，点击提交时先调用子组件的验证/数据获取方法，拿到有效数据后再执行提交逻辑，完全避免异步顺序问题。

• 子组件添加方法：

methods: {
  // 触发表单验证并返回有效数据
  getValidatedData() {
    // 触发所有字段验证
    this.$v.$touch();
    // 验证不通过返回null
    if (this.$v.$invalid) return null;
    // 返回整理好的组件数据
    return {
      standardNum: this.standardNum,
      // 其他需要回传的字段
    };
  }
}

• 父组件修改：

<template>
  <!-- 添加ref属性 -->
  <LabExposureType v-if="lab" 
                   ref="exposureComponent"
                   :labState="exposureState" 
                   v-model="standardNum">
  </LabExposureType>
  <!-- 提交按钮不变 -->
</template>

<script>
methods: {
  submit() {
    const exposureData = this.$refs.exposureComponent.getValidatedData();
    if (!exposureData) {
      // 验证失败，提示用户修正
      return;
    }
    this.exposureVals = exposureData;
    console.log('获取到的有效数据', this.exposureVals);
    // 执行后续提交逻辑（比如接口请求）
  }
}
</script>

方案2：子组件实时同步有效数据到父组件 #

利用watch或表单事件，在子组件数据验证通过后实时触发回传，确保父组件的exposureVals始终是最新的有效数据，提交时直接使用即可。

修改子组件，添加实时同步逻辑：

watch: {
  standardNum(newVal) {
    // 触发当前字段验证
    this.$v.standardNum.$touch();
    // 验证通过才回传
    if (this.$v.standardNum.$valid) {
      this.$emit('passLabExposureToParent', { standardNum: newVal });
    }
  }
}

或者在blur事件中同步：

<v-text-field 
  <!-- 其他原有属性 -->
  @blur="handleBlur"
></v-text-field>

<script>
methods: {
  handleBlur() {
    this.$v.standardNum.$touch();
    if (this.$v.standardNum.$valid) {
      this.$emit('passLabExposureToParent', { standardNum: this.standardNum });
    }
  }
}
</script>

方案3：用Promise处理异步场景 #

如果子组件存在异步验证逻辑（比如请求接口校验数据），可以让子组件暴露返回Promise的方法，父组件通过await等待异步操作完成后再执行提交。

• 子组件修改：

methods: {
  async submitAndReturnData() {
    this.$v.$touch();
    if (this.$v.$invalid) {
      throw new Error('表单验证未通过');
    }
    // 模拟异步验证（比如接口请求）
    // await this.$api.checkStandardNum(this.standardNum);
    return { standardNum: this.standardNum };
  }
}

• 父组件修改：

async submit() {
  try {
    const exposureData = await this.$refs.exposureComponent.submitAndReturnData();
    this.exposureVals = exposureData;
    // 执行提交逻辑
  } catch (err) {
    console.error(err.message);
    // 提示用户验证失败
  }
}

内容的提问来源于stack exchange，提问作者swapmeet_Lou