关于vue中的修饰符.sync

160 阅读1分钟

有时候,我们需要对一个prop进行“双向绑定”。但是真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。

这时Vue提供了update:myPropName的模式触发事件。而.sync就是这个模式的缩写,它的功能就是当一个子组件改变了一个prop的值时,这个变化也会同步到父组件中所绑定。

举个🌰

<comp :foo.sync="bar"></comp>

完整写法是:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

简单来说,.sync修饰符其实就是一个提供了父子组件双向绑定功能的语法糖。