Vue修饰符.sync与v-model有何本质区别及具体应用场景？

本文共计1302个文字，预计阅读时间需要6分钟。

目录 + Vue + 中的双向绑定 + Vue + 中的 .sync 装饰符 + .sync 的使用注意事项 + .sync 与 v-model 的比较 + Vue + 中的双向绑定 + 总结：Vue 中的 props 等数据是单向流动的。

目录

• Vue 中的双向绑定
• Vue 中的 .syc 修饰符
• .sync 使用注意事项
• .sync 与 v-model的比较

Vue 中的双向绑定

上一节中我们已经讨论过Vue中并没有真正的双向绑定。Vue中的 props等数据是单向流动的，由父级至子级向下绑定的，即：每次父组件更新时，子组件中的所有 props 都会刷新为最新的值。如果在子组件中修改 props ，Vue会向你发出一个警告，且并不能通过修改子组件的数据来更改父组件的数据）。

如果有需求，我们可以在父组件中，子组件的标签上声明一个监听事件，在子组件想要修改数据时使用$emit触发事件并传入新的值，通知父组件进行修改。这就可以实现某种程度上的双向绑定。

真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。Vue 团队推荐以update:myPropName的模式触发事件取代直接修改的操作。这就用到了 .sync 修饰符。