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

早睡身体真不戳

已于 2024-07-22 14:28:20 修改

阅读量842

点赞数 20

文章标签： vue.js 前端 javascript

于 2024-07-22 11:47:10 首次发布

本文链接：https://blog.youkuaiyun.com/JiFeng12138/article/details/140605740

版权

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

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

方案1：使用 `watch`

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

父组件：
- 定义一个响应式变量 parentValue，并将其作为 prop 传递给子组件。
- 在 updateAndCallChild 方法中更新 parentValue，然后调用子组件的方法 someChildMethod。
子组件：
- 使用 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