Vue3点击父组件按钮获取子组件数据无setTimeout方案

• 技术栈：Vue3 + Bootstrap 5
• 实现需求：点击父组件parent.vue中的按钮时，在父组件的点击回调方法内获取子组件child.vue的内部状态数据
• 现存问题：现有实现必须依赖setTimeout做延迟才能拿到子组件返回的数据，同时当前用布尔类型props做触发标记的设计存在优化空间，需要无定时器的优雅实现方案。

数据拿不到的核心原因是Vue的状态更新为异步批量执行机制：在get_data方法内将triggerFunc设为true时，Vue不会立刻触发子组件的props变更监听、执行子组件数据封装逻辑、触发childData事件更新父组件的c_data，而是会等当前同步执行栈（即get_data内所有同步代码）执行完毕后，才会统一处理状态更新、组件重渲染、事件派发。因此在get_data内同步执行console.log(this.c_data)时，子组件的传值逻辑还未执行，自然只能拿到空值。
另外原有代码存在两处显性问题：

1. 子组件内监听props变化的逻辑写在了错误位置，Vue的props变更监听需要放在watch选项内，不能和props、methods选项平级
2. 用布尔值来回切换作为触发标记本身属于反模式，容易出现重复触发、状态不一致的问题。

这是Vue官方推荐的父组件主动调用子组件逻辑、获取子组件数据的实现方式，完全不需要props传触发标记、不需要定时器，逻辑同步执行，不存在时序问题。

父组件代码 #

<template>
  <!-- 给子组件添加ref标记，用于实例访问 -->
  <Child ref="childRef" />
  <button type="button" class="btn btn-success" @click="get_data">Get Data</button>
</template>

<script>
export default {
  data() {
    return {
      c_data: [],
    }
  },
  methods: {
    get_data() {
      // 直接通过ref调用子组件暴露的方法，同步获取返回数据
      this.c_data = this.$refs.childRef.getFormData();
      // 此处可直接使用c_data，无任何延迟
      console.log(this.c_data);
    }
  },
}
</script>

子组件代码 #

<template>
  <!-- 原有输入项、按钮等逻辑保持不变 -->
  <input v-model="input1" />
  <input v-model="input2" />
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
    }
  },
  methods: {
    // 暴露获取表单数据的方法供父组件调用
    getFormData() {
      return [
        {
          Input1: this.input1,
          Input2: this.input2
        }
      ]
    }
  },
}
</script>

如果不想使用ref，也可以用Vue内置的nextTick等待状态更新完成，替代硬编码延迟的setTimeout，可靠性更高：

父组件修改点 #

// 方法改为async
async get_data() {
  this.triggerFunc = true;
  // 等待下一轮DOM更新、所有状态变更生效
  await this.$nextTick();
  // 此时c_data已经被子组件更新完成，可直接使用
  console.log(this.c_data);
  this.triggerFunc = false;
}

子组件修改点 #

将props监听逻辑移动到watch选项内：

export default {
  props: {
    triggerFunc: Boolean, 
  },
  watch: {
    triggerFunc(newVal) {
      if(newVal === true) {
        this.save_data()
      }
    }
  },
  methods: {
    save_data() {
      const data = [
        {
          Input1: this.input1,
          Input2: this.input2
        },
      ]
      this.$emit("childData", data);
    }
  }
}

该方案本质还是事件回传逻辑，只是用Vue内置的更新等待机制替代了固定延迟的定时器，可靠性优于原写法，但逻辑简洁度不如ref调用方案。

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