v-bind.sync 修饰符用于 vue 中父子组件的双向绑定。其本质是语法糖，实现两步操作：父组件传值给子组件 prop，子组件通过 $emit('update:prop') 通知更新；例如 :title.sync="val" 等价于 :title="val" + @update:title；适用于多属性同步场景，如弹窗组件控制多个状态；注意事项包括避免直接修改 prop、需使用 update:xxx 命名事件；区别于 v-model，.sync 可用于任意 prop，最终提升组件通信灵活性与开发效率。
在 Vue 中，v-bind.sync 修饰符用于实现父子组件之间的双向绑定。虽然 .sync 不像 v-model 那样常被提及，但在某些场景下非常实用，特别是在需要同步多个 prop 的时候。
基本用法和原理
.sync 修饰符本质上是一个语法糖。当你在子组件上使用 v-bind:prop.sync="value" 时，Vue 会自动为你做两件事：
- 在父组件中传递一个值给子组件的
prop - 子组件通过
$emit触发更新，通知父组件更新对应的值
例如：
立即学习“前端免费学习笔记（深入）”；
<!-- 父组件 --> <ChildComponent :title.sync="parentTitle" />
这等价于：
<ChildComponent :title="parentTitle" @update:title="parentTitle = $event" />
子组件内部要修改这个 prop 时，不能直接使用 this.$emit('update:title', newValue)，否则会报错。正确的做法是触发一个事件来通知父组件更新。
使用场景：多属性同步
.sync 修饰符非常适合需要同步多个 prop 的情况。比如你有一个弹窗组件，需要同时控制显示状态、标题、内容等。
你可以这样写：
<PopupComponent :visible.sync="isPopupVisible" :title.sync="popupTitle" :content.sync="popupContent" />
这样每个属性都可以独立地在父子组件之间同步，而不需要为每个属性单独写 @update:xxx。
注意事项和常见问题
-
避免直接修改 prop：子组件中不要直接使用
this.$set(this, 'propName', newValue)或this.propName = newValue，这是不推荐的做法。 -
命名规范：如果你用了
.sync，子组件必须通过$emit('update:propName')来更新值，否则无法同步。 -
与 v-model 的区别：
v-model是针对value和input的语法糖，.sync则适用于任意 prop。
总结一下
.sync 修饰符简化了父子组件间的数据同步流程，尤其适合处理多个 prop 的双向绑定需求。虽然它不像 v-model 那么常用，但理解它的机制能让你在开发组件时更加灵活高效。基本上就这些。
