什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？

Question

先看.sync 的官方定义再来看v-model两者要实现的目的都是一样，子组件和外部数据同步，双向绑定

Answer 1

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

Answer 2

• v-model
v-model 绑定的是 value , 语义上是指绑定组件的值， 如 el-input 的 v-model 就是指输入的值，

• .sync
.sync 只是一个双向绑定的语法糖，是指允许子组件内部修改父组件的状态。 如<el-dialog :visible.sync='dialogVisible'></el-dialog> 就只是说，组件el-dialog 的visible 状态可以被组件内部改变。

两者共同点是都是双向绑定元素，不同点是 v-model 双向绑定的是value, .sync 可以双向绑定任何属性（prop）

综上，其实就是说，

如果一个组件需要双向绑定的属性，

它有值么？ 有就用 v-model， 如el-input 的值可能是用户输入的字符串， el-form 的值可能是 a=b&c=d, 也有可能是 { a:'b', c:'d' }

如果没有值，如一个对话框el-dialog 只有显隐状态(visible.sync)，没有值（当然，如果你认为它有值，那也可以用v-model）。

Answer 3

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