2.6 sync

 sync

.sync 修饰符提供了一种简洁的方式来实现父组件和子组件之间的双向绑定。它本质上是一种语法糖，简化了某些情况下需要显式地使用事件来更新父组件状态的代码。

.sync 的等价写法（帮助理解）

以下两种写法是等价的：

<!-- 使用 .sync -->
<ChildComponent :user-info.sync="userInfo" />

<!-- 手动写法 -->
<ChildComponent 
  :user-info="userInfo" 
  @update:user-info="val => userInfo = val" 
/>

基本用法

当你希望子组件能够修改父组件的数据时，可以使用 .sync 修饰符。这通常涉及到一个父组件向子组件传递一个 prop，并且允许子组件修改这个值，同时更新父组件中的相应数据。

示例

父组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :msg.sync="message" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
</script>

子组件：

<template>
  <button @click="updateMessage">Update Message</button>
</template>

<script>
export default {
  props: ['msg'],
  methods: {
    updateMessage() {
      // 使用 $emit 触发 'update:msg' 事件来更新父组件的 message
      this.$emit('update:msg', 'Hello from child')
    }
  }
}
</script>

在这个例子中，当用户点击按钮时，子组件通过 $emit('update:msg', newValue) 来通知父组件更新 msg 的值。.sync 修饰符让这个过程变得更加简洁明了。

工作原理

• .sync 修饰符 实际上是一个语法糖，它会自动扩展为一个额外的事件监听器。例如，:msg.sync="message" 会被扩展为：

  :msg="message" @update:msg="value => message = value"

• 当子组件通过 $emit('update:msg', newValue) 发出事件时，父组件中的 message 就会被设置为新的值。

进阶用法

除了简单的字符串或数值类型之外，.sync 也可以用于对象类型的 prop 更新。但是需要注意的是，Vue 对于对象和数组是通过引用传递的，因此直接修改对象属性不会触发视图更新。为了确保视图正确更新，应该返回一个新的对象或者使用 $emit 来明确通知父组件进行更新。

注意事项

1. 避免滥用：虽然 .sync 可以简化一些情况下的代码，但它也可能导致代码难以理解。只有在确实需要简单双向绑定的情况下才使用它。

2. 与 Vuex 结合使用：如果项目中使用了 Vuex 来管理状态，应尽量避免直接使用 .sync 来进行父子组件间的状态共享，而是遵循 Vuex 的单向数据流原则。

3. Vue 3 的变化：在 Vue 3 中，.sync 修饰符已经被移除，取而代之的是更强大的 v-model 功能，支持自定义事件名称以及多个 v-model 绑定。

综合案例

可编辑的用户信息卡片组件

我们创建一个 UserCard 组件，支持：

• v-model 控制“是否编辑中”（editing 状态）
• .sync 同步用户的 name 和 age

父组件：Parent.vue

<template>
  <div>
    <h2>父组件</h2>
    <p>当前编辑状态: {{ isEditing }}</p>
    <p>同步的用户名: {{ syncedName }}</p>
    <p>同步的年龄: {{ syncedAge }}</p>

    <!-- v-model 控制 editing 状态 -->
    <!-- .sync 同步 name 和 age -->
    <UserCard
      v-model="isEditing"
      :name.sync="syncedName"
      :age.sync="syncedAge"
    />
  </div>
</template>

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

export default {
  components: { UserCard },
  data() {
    return {
      isEditing: false,       // v-model 绑定
      syncedName: 'Alice',
      syncedAge: 25
    }
  }
}
</script>

子组件：UserCard.vue

<template>
  <div :class="{ editing }" style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;">
    <template v-if="editing">
      <h3>编辑模式</h3>
      <input v-model="localName" placeholder="姓名" />
      <input v-model.number="localAge" type="number" placeholder="年龄" />
      <button @click="save">保存</button>
      <button @click="cancel">取消</button>
    </template>
    <template v-else>
      <h3>只读模式</h3>
      <p>姓名：{{ localName }}</p>
      <p>年龄：{{ localAge }}</p>
      <button @click="edit">编辑</button>
    </template>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    value: Boolean,        // v-model 默认使用 value
    name: String,
    age: Number
  },
  data() {
    return {
      localName: this.name,
      localAge: this.age
    }
  },
  computed: {
    editing() {
      return this.value // 映射 v-model 的 value
    }
  },
  watch: {
    name(newVal) {
      this.localName = newVal
    },
    age(newVal) {
      this.localAge = newVal
    }
  },
  methods: {
    edit() {
      // 触发 v-model 更新：value -> true
      this.$emit('input', true)
    },
    save() {
      // 1. 同步 name
      this.$emit('update:name', this.localName)
      // 2. 同步 age
      this.$emit('update:age', this.localAge)
      // 3. 退出编辑（v-model -> false）
      this.$emit('input', false)
    },
    cancel() {
      // 取消编辑，恢复本地值（可选：也可恢复为父组件传入的值）
      this.localName = this.name
      this.localAge = this.age
      this.$emit('input', false)
    }
  }
}
</script>

通信机制解析

 使用场景总结

这种 v-model + .sync 组合特别适用于：

• 表单编辑组件（如弹窗、卡片）
• 主状态用 v-model 控制显隐或编辑状态
• 多个字段用 .sync 实现独立双向同步
• 避免使用 v-model 多次（Vue 2 不支持）

⚠️ 注意事项

1. Vue 2 的 v-model 只能有一个：它默认绑定 value 和 input。
2. .sync 可以多个：每个 .sync 对应一个 update:xxx 事件。
3. 命名冲突：避免 v-model 的 value 和某个 .sync prop 重名。
4. Vue 3 替代方案：在 Vue 3 中，可以用多个 v-model，如 v-model:editing、v-model:name，更清晰。

虽然 v-model 和 .sync 不能绑定同一个 prop，但它们可以协同工作，分别管理不同的状态：

v-model 管“状态开关”（如编辑中），.sync 管“数据同步”（如字段值）

这是一种在 Vue 2 中构建高级可复用组件的推荐模式。