解析Vue 中的 .sync 修饰符

429 阅读1分钟

.sync修饰符就是一个编译时语法糖

在Vue的里面尤大定了些规则:

  • 组件不能修改props外部数据
  • this.$emit可以出发事件,并传参
  • $event可以获取$emit传的参数

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。通过update:myPropName的模式触发事件来通知父组件传来的值需要变化,从而改变父组件里的数据,实现了prop的“双向绑定”。

1.父组件的一种写法 2.父组件上使用语法糖.sync 3.子组件上的用法不变,依旧使用$emit的方法触发事件并传参 由于想要对prop进行“双向绑定”的这种场景很常见,尤大发明了.sync这种编译时语法糖,方便开发者使用

PS

需要注意的点是,命名,上图中的我所有写anyName的地方可以改其它名,但必须各处一样,这是用语法糖的前提。