有时候,我们需要对一个prop进行“双向绑定”。但是真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。
这时Vue提供了update:myPropName的模式触发事件。而.sync就是这个模式的缩写,它的功能就是当一个子组件改变了一个prop的值时,这个变化也会同步到父组件中所绑定。
举个🌰
<comp :foo.sync="bar"></comp>
完整写法是:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
简单来说,.sync修饰符其实就是一个提供了父子组件双向绑定功能的语法糖。