在vue中很多时候需要prop是一个双向绑定的值,但是vue推荐单向数据流,不提倡变更prop,也不推荐子组件更新父组件的值,因为子组件和父组件都没有明显的变更来源,不小心还会导致死循环,导致寻找问题比较困难。
如果非要改变父组件的值,vue推荐使用 update:myPropName的模式触发事件
官网例子 比如目前有一个text-document要双向绑定一个title组件
需要这么写
<textDocument :title="title" @update:title="title=$event"></textDocument>
接着text-document组件中需要如下定义
这样提供明显的更新来源
.sync 是这种模式的语法糖 例如上述的例子
父组件可以直接写
<textDocument :title.sync="title"></textDocument>
子组件不用变依然是
<div>
{{ title }}
<button @click="$emit('update:title',newTitle)">更新title</button>
</div>
所以.sync只是可以让你省略@update:propName="propName = $event" 的语法糖
可以批量设置.sync 绑定一个对象
<textDocument v-bind.sync="obj"></textDocument>
这样会为obj的每个对象设置@update:propName="propName = $event"事件
官网地址 vue官网sync