JS学习笔记--Vue中.sync修饰符的作用
最新回答
素觞流年
2026-10-22 16:45:50
理解.sync需要从官方文档入手，它指出在某些情况下需要对某个prop进行双向绑定。然而，真实的双向绑定可能引起维护问题，因为子组件可能修改父组件值，且在父组件和子组件之间没有明显的变更来源。推荐使用update:myPropName的事件模式代替。
举例来说，在一个包含title prop的组件中，可以通过以下方式表达赋予新值的意图：
父组件监听这个事件并根据需要更新本地数据属性。例如：
为了方便，Vue提供了sync修饰符作为缩写：
场景描述：
设想一个简单的场景，钱的所有权属于爸爸，儿子有使用权。用代码实现这个场景如下：
爸爸组件中，total表示爸爸现有的钱数，通过money将钱传给儿子。
儿子组件接收到钱后，应通知爸爸。此时若不通知，将导致错误。
儿子需要花钱时，应通知爸爸。此时，使用update:money事件模式，让爸爸监听儿子的花费操作。
但这种方式实现起来较长，Vue为此提供了sync修饰符来简化代码：
整个v-on:update:money='total=$event'语句通过sync修饰符简化为：
总结：组件不能修改props外部数据，$emit触发事件并传参，$event获取$emit的参数。sync的作用在于，当子组件改变prop值时，此变化会同步到父组件中绑定。使用事件监听实现起来较为复杂，因此sync用于简化代码，是一种语法糖。
热门标签
