Vue 3 父子组件数据同步：告别 .sync，拥抱 v-model

本文旨在解决 vue 3 中父组件变量无法通过子组件 `update-emit` 更新的问题。vue 3 已移除 `.sync` 修饰符，并引入 `v-model:propname` 作为其替代方案，以实现更简洁高效的双向数据绑定。通过本教程，您将学习如何正确使用 `v-model:propname` 来确保父子组件间的数据同步，从而避免数据更新失效的常见问题。

在 Vue 2 中，为了实现父子组件之间的双向数据绑定，我们常常会使用 .sync 修饰符。它允许子组件通过触发 update:propName 事件来更新父组件中对应的 prop 值，极大地简化了双向数据流的管理。然而，随着 Vue 3 的发布，为了统一 API 和提供更灵活的解决方案，.sync 修饰符已被正式移除。这导致许多从 Vue 2 迁移到 Vue 3 的开发者在沿用旧有模式时，会遇到父组件数据无法响应子组件更新的问题。

Vue 3 中 .sync 修饰符的移除及其影响

Vue 3 废除了 .sync 修饰符，转而推荐使用 v-model 的扩展形式来处理多属性的双向绑定。这意味着，像 :show.sync="showModal" 这样的语法在 Vue 3 中将不再生效。当子组件尝试通过 this.$emit('update:show', newValue) 更新父组件的 showModal 变量时，由于父组件不再监听 .sync 带来的隐式事件，showModal 将不会被更新，导致数据不同步。

例如，考虑以下 Vue 2 风格的组件代码，它在 Vue 3 环境下将无法正常工作：

原始子组件 (mymodal.vue)：

立即学习“前端免费学习笔记（深入）”；

<template lang="pug">
b-modal(v-model="dshow") // b-modal 内部通常会处理 v-model，即 emit('update:modelValue')
  template(v-slot:default) test
</template>

<script>
export default {
  props: {
    show: { // 接收父组件传递的 show prop
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dshow: false // 子组件内部状态，与 show prop 同步
    }
  },
  watch: {
    show: function (newVal) {
      // 监听 prop 变化，更新内部状态
      this.dshow = newVal
    },
    dshow: function () {
      // 监听内部状态变化，触发 update:show 事件通知父组件
      this.$emit('update:show', this.dshow)
    }
  }
}
</script>

原始父组件：

<template lang="pug">
button.btn.btn-primary.hstack.gap-2(@click="showModal = true") Show Modal!
demo(:show.sync="showModal") // 在 Vue 3 中，此行代码的 .sync 修饰符不再生效
</template>

<script>
import demo from './mymodal.vue' // 假设路径

export default {
  components: {
    demo
  },
  data() {
    return {
      showModal: false // 控制模态框显示/隐藏的父组件变量
    }
  }
}
</script>

在这种情况下，当点击父组件的按钮时，showModal 会变为 true，模态框显示。但当用户关闭模态框时，子组件的 dshow 变化并触发 update:show 事件，父组件的 showModal 却不会更新回 false。这导致下次点击按钮时，showModal 仍为 true，模态框无法再次打开（或表现异常）。

拥抱 v-model:propName 实现双向绑定

在 Vue 3 中，实现与 .sync 相同功能的推荐方式是使用 v-model 的具名绑定。v-model:propName="value" 实际上是以下语法的语法糖：

:propName="value" @update:propName="value = $event"

这意味着，v-model:show="showModal" 会将 showModal 作为名为 show 的 prop 传递给子组件，同时监听子组件发出的 update:show 事件，并将事件的载荷 ($event) 赋值回 showModal。

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

0

查看详情

代码示例与实践

要解决上述问题，我们需要对父组件的代码进行修改，而子组件由于其 emit('update:show') 的逻辑是正确的，因此只需进行微调即可。

Vue 3 兼容的子组件 (mymodal.vue) 改造：

子组件的核心逻辑（接收 show prop 并发出 update:show 事件）与 Vue 2 保持一致，但为了更严谨地处理 prop 的初始化同步，我们可以为 watch 添加 immediate: true。

<template lang="pug">
// 假设 b-modal 内部使用 v-model 绑定其自身的显示状态
b-modal(v-model="dshow")
  template(v-slot:default) test
</template>

<script>
export default {
  props: {
    show: { // 接收父组件通过 v-model:show 传递的 prop
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dshow: false // 子组件内部状态，用于控制 b-modal 的显示
    }
  },
  watch: {
    show: {
      // 监听 show prop 变化，立即同步到内部 dshow 状态
      immediate: true,
      handler(newVal) {
        this.dshow = newVal
      }
    },
    dshow: function (newVal) {
      // 监听内部 dshow 状态变化，通过 update:show 事件通知父组件
      this.$emit('update:show', newVal)
    }
  }
}
</script>

Vue 3 兼容的父组件改造：

这是最关键的改动，将 .sync 修饰符替换为 v-model:propName 语法。

<template lang="pug">
button.btn.btn-primary.hstack.gap-2(@click="showModal = true") Show Modal!
demo(v-model:show="showModal") // 关键改动：使用 v-model:show 替换 :show.sync
</template>

<script>
import demo from './mymodal.vue'

export default {
  components: {
    demo
  },
  data() {
    return {
      showModal: false // 控制模态框显示/隐藏的父组件变量
    }
  }
}
</script>

通过上述修改，当子组件内部的 dshow 状态发生变化（例如，用户关闭了模态框）时，它会触发 this.$emit('update:show', this.dshow) 事件。父组件通过 v-model:show="showModal" 监听这个 update:show 事件，并自动将 showModal 更新为子组件传递过来的新值，从而实现了父子组件之间数据的正确双向同步。

注意事项与最佳实践

1. 默认 v-model： 当不指定 propName 时，v-model="value" 默认绑定到名为 modelValue 的 prop，并监听 update:modelValue 事件。
2. 多属性绑定： Vue 3 允许在一个组件上绑定多个 v-model。例如，一个表单组件可能需要同时绑定 firstName 和 lastName：

   <MyForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

   登录后复制

   对应的子组件需要分别声明 firstName 和 lastName prop，并发出 update:firstName 和 update:lastName 事件。

3. 清晰的命名： 推荐为 v-model 绑定的 prop 使用有意义的名称，以提高代码可读性。
4. 官方迁移指南： 在进行 Vue 2 到 Vue 3 的迁移时，务必查阅 Vue 官方的迁移指南。它详细列出了所有重大变更和推荐的替代方案，能帮助开发者避免常见陷阱。

总结

Vue 3 通过移除 .sync 修饰符并增强 v-model 的功能，为组件间的双向数据绑定提供了更统一、更灵活的机制。理解 v-model:propName 的工作原理，并正确地在父子组件中使用它，是 Vue 3 开发中实现高效数据同步的关键。通过遵循本教程中的示例和最佳实践，您可以确保您的 Vue 3 应用在父子组件通信方面保持健壮和可维护。

以上就是Vue 3 父子组件数据同步：告别 .sync，拥抱 v-model的详细内容，更多请关注php中文网其它相关文章！