Vue的修饰符 .sync

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

 

posted @ 2019-05-04 09:28  落叶无痕~  阅读(521)  评论(1编辑  收藏  举报