Vue 父组件调用子组件函数，props 变量未更新

经过日志排查，发现是调用函数时，props变量未更新。

子组件的 props 变化速度慢于我直接调用子组件抛出的函数，并且子组件需要变化后的 props 值，此时，可以使用 watch 监听 props 的变化，并在回调中处理需要变化后的 props 的逻辑。

方案1：使用 watch

你可以在子组件中使用 watch 监听 props 的变化，并在变化后调用需要依赖变化后的 props 值的函数。

1. 父组件：

   • 定义一个响应式变量 parentValue，并将其作为 prop 传递给子组件。
   • 在 updateAndCallChild 方法中更新 parentValue，然后调用子组件的方法 someChildMethod。

2. 子组件：

   • 使用 defineProps 接收 propValue，并定义一个内部响应式变量 internalValue 来保存 propValue。
   • 使用 watch 监听 propValue 的变化，并在变化后更新 internalValue。
   • 定义 handleUpdatedPropValue 方法来处理变化后的 propValue，并在 watch 回调和 someChildMethod 中调用此方法。
   • 使用 defineExpose 暴露 someChildMethod 方法供父组件调用。

这样，在父组件调用 updateAndCallChild 时，parentValue 会先更新，子组件的 watch 会监听到 propValue 的变化并调用 handleUpdatedPropValue，此时子组件的方法使用的是最新的 props 值。

方案2：使用 nextTick

如果在调用子组件方法时，watch 也没有触发，可能是因为 props 的变化还没有被 Vue 的响应式系统捕捉到。在这种情况下，你可以考虑使用 nextTick 来确保 props 的变化被应用后再调用子组件的方法。

nextTick 是一个 Vue 提供的工具，用于在下一个 DOM 更新周期结束之后执行回调函数。这样可以确保在调用子组件方法时，props 的变化已经生效。

const updateAndCallChild = async () => {
  parentValue.value = 'Updated value';
  await nextTick();
  if (childRef.value) {
    childRef.value.someChildMethod();
  }
};

通过这种方式，你可以确保在调用子组件方法时，子组件已经捕捉到了最新的 props 变化。

感谢ChatGpt