vue 修饰符sync详解

在vue1.0版本的时候就有sync，但是在2.0后就去除了，当更新到 2.3.0后又发现这个功能其实挺有用的，后来又加了这个功能。那么问题来着这个修饰符是干嘛的呢？其实这个更新父组件数据的语法糖，当子组件更改了父组件传的数据，然后父组件要及时响应。

废话不多说，上代码：

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

如果展开来就是

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

注：这里的“val=>bar=val”为es6的写法，表示把从子组件传过来的值赋值给bar，并返回bar，类似于：

function(val){  return bar = val }

当子组件要更新父组件的数据时候，我们只需要发送请求：

this.$emit('update:foo', newValue)

就可以更新到父组件的值。

综上所述：

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。