.sync 修饰符以前存在于 vue1.0版本里,在2.0版本中移除了 .sync 但是在2.0发布之后的实际应用中,我们发现 .sync 还是有其适用之处的,比如在开发可复用组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从2.3.0起,Vue重新引入了 .sync修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
<com :foo.sync="bar"></com>
会被扩展为:
<com :foo="bar" @update:foo="val => bar = val"></com>
当子组件需要更新foo的值时,它需要显示地触发一个更新事件:
this.$emit("update:foo", newValue)
Vue修饰符sync的功能是:当一个子组件改变了一个prop值时,这个变化也会同步到父组件中所绑定。如果我们不用 .sync,我们也可以用props传初始值,然后事件监听。