Vue的修饰符 .sync

Posted 2021-11-27 haishen

　　.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传初始值，然后事件监听。