Vue2中通过v-model绑定时父组件获取子组件值出现旧值如何解决？

这是Vue的异步更新队列机制导致的正常现象：
v-model双向绑定的执行顺序如下：

• 子组件AppSelect触发input/update:modelValue事件上报新值
• 父组件接收到事件后，将新值更新到自身绑定的响应式变量
• 该响应式变量的更新不会立刻同步到子组件的prop，而是会被推入Vue的异步更新队列，等待当前同步代码全部执行完成后，再批量更新所有关联的prop和视图
  你在watch监听触发的同步逻辑中直接遍历子组件读取value prop时，子组件的prop还未完成更新，因此拿到的是旧值；setTimeout等待后能拿到正确值，本质是手动等待了Vue的异步更新队列执行完成。

方案1：用$nextTick替代setTimeout（最小改动量） #

$nextTick是Vue官方提供的API，专门用于等待当前一轮DOM/Prop更新完成后执行回调，比随机延迟的setTimeout更稳定可靠，没有多余的延迟开销：

// 父组件watch逻辑修改示例
watch: {
  绑定的v-model变量(newVal) {
    this.$nextTick(() => {
      // 此处遍历子组件读取value prop，即可拿到最新值
      const latestVal = this.$refs.appSelect.value
    })
  }
}

方案2：优先读取父组件自身的响应式变量（推荐） #

v-model绑定的变量本身就存放在父组件中，不需要跨组件读取子组件的prop获取值，直接使用父组件自身的响应式变量即可，完全可以规避异步更新的问题，同时降低组件间的耦合度。

方案3：表单批量收集场景的规范实现 #

如果AppForm的需求是批量收集所有表单项的最新值，建议改用事件订阅或provide/inject实现数据同步：子组件值更新时主动将最新值上报给父组件的统一收集器，父组件不需要主动遍历子组件读取prop，从根源上避免异步更新导致的取值异常问题。

直接操作子组件实例、读取子组件prop属于强耦合的实现方式，后续子组件prop命名或内部逻辑调整时很容易导致父组件逻辑失效，非特殊情况不推荐使用该实现方式。

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