Vue 中的 .sync 修饰符有什么用

在我们开发Vue的应用过程中，有一个父子组件通信的需求是很常用的：父组件 Parent 存在属性 d ，通过参数p 传输给子组件Child，我们希望Child组件能改变Parent的属性 d 。在没有修饰符 .sync 的情况下，我们的一般方法是这样的：

1. 父组件监听子组件事件 update:p ,并且将参数 p 绑定为d
2. 子组件触发update:p 事件并向该事件传入父组件属性 d的新值
3. 父组件的事件处理函数触发，处理函数根据传入的新值改变组件的属性 d
   具体代码如下：

/ Parent
<template>
  <Child :p="d" v-on:update:p="d = $event" />
</template>
<script>
export default {
  data() {
    return {
      d: 0
    }
  }
}
</script>
// Child
<template>
  <div @click="$emit('update:p', 'p+1')">child</div>
</template>
<script>
export default {
  props:{
    p: Number
  }
}
</script>

由于父组件的模式是固定的，所以Vue引入了.sync来简写这种模式，简写后的代码如下：

 <Child :p.sync="d" />

字面意义就是说子组件参数p 值与父组件的属性d值同步(synchronize)，子组件调用 update:p 方法表面上是更新参数p，实际上是通过更新父组件的属性d来更新参数p，Vue把事件取名为这个是估计是想更通俗易懂一点。