Vue.js 中 `.sync` 修饰符：简化父子组件通信，实现数据双向绑定

2023-10-26 21:06:01

Vue 的 .sync 修饰符：在组件间无缝同步数据

在 Vue.js 中，父子组件之间的通信是常见的需求。在过去，我们通常使用 $emit 和 $on 事件来实现通信，但这种方式较为繁琐，并且需要在父组件和子组件中都编写大量的代码。

为了简化父子组件间的通信，Vue.js 引入了 .sync 修饰符。.sync 修饰符允许我们在父子组件之间建立双向数据绑定，这样一来，当子组件中的数据发生变化时，父组件中的数据也会自动更新。

使用 .sync 修饰符非常简单，只需要在子组件的模板中使用 v-model 指令，并在 v-model 指令中加上 .sync 修饰符，然后将子组件中需要绑定的数据作为参数传入即可。例如：

<template>
  <input v-model.sync="message">
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在上面的示例中，我们使用 v-model.sync 指令将子组件中的 message 数据与父组件中的 message 数据进行了双向绑定。这样一来，当子组件中的 message 数据发生变化时，父组件中的 message 数据也会自动更新。

.sync 修饰符不仅可以用于简单的数据类型，还可以用于对象和数组等复杂的数据类型。例如，我们可以使用 .sync 修饰符将子组件中的一个对象数据与父组件中的一个对象数据进行双向绑定：

<template>
  <div>
    <input v-model.sync="user.name">
    <input v-model.sync="user.age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  }
}
</script>