v-model和.sync

v-model和.sync的区别,都是vue.js中实现双向绑定的指令,但他们之间有一些差异

在平时开发过程中，v-model 使用频率很高。一般来说，v-model 可用于在表单及元素上创建双向数据绑定，其本质是语法糖。但提到语法糖，这里就不得不提另一个与 v-model 有着相似功能的双向数据绑定语法糖，那就是 .sync 修饰符

1.v-model:

v-model是vue.js提供的一个语法糖,用于在表单元素上创建双向数据绑定

v-model通常用于表单输入元素如(input,textarea,select)

v-model用在标签上,v-bindLvalue与data中定义的一个变量,然后v-on:input事件,事件处理函数修改属性绑定的data中的变量,是这个变量的值等于当前变迁的value的值

v-model用在组件上:v-bind:value与data中定义的一个变量,然后v-on:input事件,事件处理函数中修改属性绑定的data中的变量,使这个变量的值等于子组件使用$enit传递过来的值

习惯写法 

<input v-model="val" type="text" />

完整写法

<input :value="val" @input="val = $event.target.value" />

在给 input 元素添加 v-model 属性时，默认会把 val 作为元素的属性，然后把 input 事件作为实时传递 value 的触发事件。

注意:  不是所有能进行双向绑定的元素都是 input 事件。

2.修饰符.sync

修饰符.sync用在组件上：v-bind:一个自定义属性与data中定义的一个变量，然后v-on:一个名为“update:自定义属性”的自定义事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。

.sync 修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值

<son
  :a="num" @update:a="val => num = val"
  :b="num2" @update:b="val => num2 = val">
</son>

总结:

v-model与,sync的区别

1.相同点

都是语法糖,都是可以实现父子组件爱你中的数据双向通信

2.区别

使用格式

v-model="num"，:num.sync="num"

注意:在vue2中 只能有一个v-model ,   .sync可以有多个