无论是vue还是react，在父子组件通讯的时候，子组件都禁止直接修改父级传过来的prop，父组件总需要在子组件身上监听一个事件，然后由子组件去触发它，好让父组件来接收到payload去改变state。幸运的是，vue为我们准备了两个语法糖，让我们减少了一点写大量模板代码的痛苦。它们就是自定义组件上的v-model指令以及.sync修饰符。

使用情景如下：

假如我们有如下的一个父组件，想为子组件传递一个名为val的prop，并且期待有双向绑定的效果：

而子组件负责接收val，并且每click一次button，则让val+2：

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。利用model 选项可以用来避免这样的冲突。换句话说，你可以将v-model的prop以任意名称来接收，不一定要使用value， 事件名称也可以是任意的，不一定非要写成input。如下例：

父组件通过v-model传递val值：

而子组件内通过model选项去绑定这个prop：

父组件通过.sync修饰符传递val值：

子组件内接收更简单，因为vue内部帮我们绑定了update:myPropName这样一个事件：

.sync修饰符写起来更简便一些，双向绑定爽歪歪。不过有一点要注意，像v-bind.sync=”{ title: doc.title }”这种绑定字面量对象，修饰符是无法正常工作的。

先上结论：两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一

v-model只能有一个，（一个组件只有一个model）个人理解，别的就是语义的区别了，prop.sync表示这个子组件会修改父组件的值，v-model表示这是个表单类型的组件。

v-model一般是表单组件，绑定的是value属性，这个值的双向绑定也不是父组件和子组件的关系，而是view和model的对应关系，因为表单组件的值的变化来自于用户输入而sync是指父子组件之间的通信