v-model与.sync的区别

        我们在日常开发的过程中,v-model指令可谓是随处可见,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。在这里就两者的使用进行一下比较和总结:

一、v-model

        v-model的本质上来说,是一个语法糖

        目前咱们习惯性的写法是这样的:

        但是实质上的完整写法是这样的:

        也可以将@input后面写成一个函数,然后在methods中进行赋值操作。

        要理解这行代码，首先我们要知道 input 元素本身有个input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val ,完成双向数据绑定的效果 。

        注意:  不是所有能进行双向绑定的元素都是input事件。可以查看我的另一篇单独介绍自定义组件的v-model的文章 

        ↓↓↓↓↓↓↓↓↓↓

自定义子组件的v-model-CSDN博客

二、.sync修饰符

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

        2.本质：

// 正常父传子： 

// 加上sync之后父传子： 
 
// 它等价于
 
// 相当于多了一个事件监听，事件名是update:a；
// 回调函数中，会把接收到的值赋值给属性绑定的数据项中。

注意：这里面的传值与接收与正常的父向子传值没有区别,唯一的区别在于往回传值的时候$emit所调用的事件名必须是update:属性名 ,事件名写错不会报错,但是也不会有任何的改变,这点需要多注意。

三、例举与总结

同样实现父子组件双向数据传递：

1.使用自定义v-model

        父组件中

 子组件

 2.使用.sync

        父组件中

        子组件中

       总结：.sync与v-model都是语法糖，都可以实现父子组件的通信，但v-model只能用一次，.sync却可以有多个