Vue .sync 双向绑定复杂对象：实战指南

Vue .sync 实现复杂对象双向绑定：实战指南

Vue.js 中的 .sync 修饰符可以用于实现父子组件之间复杂对象的双向绑定。这使得子组件可以修改父组件传递过来的复杂对象属性，并且修改后的值会自动同步回父组件。

示例场景：

假设有一个父组件和一个子组件，父组件有一个名为 'person' 的复杂对象，包含 'name' 和 'age' 两个属性。子组件需要修改这个对象的属性值，并将修改后的值传递回父组件。

父组件模板代码：

<template>
  <div>
    <h1>Person Information</h1>
    <p>Name: {{person.name}}</p>
    <p>Age: {{person.age}}</p>
    <ChildComponent :person.sync='person'></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      person: {
        name: 'John',
        age: 30
      }
    }
  }
}
</script>

子组件模板代码：

<template>
  <div>
    <h2>Edit Person Information</h2>
    <form>
      <label>Name:</label>
      <input v-model='person.name' type='text' />
      <label>Age:</label>
      <input v-model.number='person.age' type='number' />
    </form>
  </div>
</template>

<script>
export default {
  props: {
    person: {
      type: Object,
      required: true
    }
  }
}
</script>

解释：

在父组件中，我们使用 :person.sync='person' 将 person 对象传递给子组件，并使用 .sync 修饰符进行双向绑定。
在子组件中，我们使用 props 接收 person 对象。
子组件可以使用 v-model 指令修改 person 对象的属性值。例如，使用 v-model='person.name' 将 person.name 属性绑定到输入框，修改输入框的值会自动更新 person.name 属性。
由于使用了 .sync 修饰符，子组件对 person 对象的任何修改都会自动同步到父组件中。

注意事项：

.sync 修饰符本质上是语法糖，它会自动创建两个事件监听器，用于在父子组件之间同步数据。
使用 .sync 修饰符时，需要确保父组件和子组件中的 person 对象引用的是同一个对象实例。否则，数据同步将无法正常工作。

通过 .sync 修饰符，我们可以轻松实现父子组件之间复杂对象的双向绑定，提高代码的可读性和可维护性。