Vue 3 中 v-for 子组件 modelValue 同步难题：彻底解决

2024-03-10 07:56:03

在 Vue 3 中解决 v-for 循环中子组件 modelValue 同步问题

问题：同步难题

在 Vue 3 中使用 v-for 循环渲染多个子组件并使用 v-model 绑定 modelValue 属性时，可能会遇到一个棘手的同步问题。当从子组件更新 modelValue 时，所有子组件的值都会发生变化，而不是只更新目标子组件的值。这可能是应用程序中一个令人沮丧的错误，导致意外的行为。

根源：错误的更新方法

问题的根源在于子组件中更新 modelValue 的方法。使用 props.modelValue = newValue 直接赋值会导致所有子组件的 modelValue 同步更新。这是因为 Vue 3 中的 props 是响应式的，这意味着对 props 的任何更改都会触发重新渲染所有使用该 prop 的组件。

解决方案：使用 `emit`

要解决此问题，需要在子组件中使用 emit('update:modelValue', newValue) 代替 props.modelValue = newValue 来更新 modelValue。通过使用 emit 方法，子组件将触发父组件的 update:modelValue 事件，父组件将负责更新关联的模型。这确保了只更新目标子组件的值，而不会影响其他子组件。

修改后的子组件代码

<template>
  <h4 class="list--title">{{ props.modelValue }}</h4>
  <p class="list__options-item list--sorting-options-item" v-for="option in props.options" :key="option" @click="() => emit('update:modelValue', option)">{{ option }}</p>
</template>

流程

当子组件中的某个选项被点击时，它将触发 @click 事件侦听器。
事件侦听器调用 emit('update:modelValue', option)，传递新值。
父组件接收 update:modelValue 事件，并更新关联的模型。
只有目标子组件的值被更新，而不会影响其他子组件。

结论

通过在子组件中正确使用 emit 方法，我们可以解决 Vue 3 中 v-for 循环中子组件 modelValue 同步问题。这确保了只有目标子组件的值被更新，从而避免了意外行为和混乱。通过理解这个问题的根源和解决方案，您可以自信地构建和维护使用 v-for 循环和子组件的 Vue 3 应用程序。