vue理解.sync

在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