v-model与.sync的区别

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

一、v-model

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

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

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

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

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

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

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

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

        ↓↓↓↓↓↓↓↓↓↓

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

二、.sync修饰符

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

        2.本质：

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

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

三、例举与总结

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

1.使用自定义v-model

        父组件中

<template><div>父组件{{ sonData }}<Son v-model="sonData"/><el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>

 子组件

<template><div>子组件{{ value }}<el-input v-model="val1ue" clearable maxlength="200" @change="change" /></div>
</template><script>
export default {name: 'Son',model: {prop: 'val1ue', // 父组件的v-model所绑定的值是这里的prop的属性值对应的props中的值event: 'change' // 定义通过$emit去调用的父组件的事件，在父组件的v-model改变时则会安装这个方法去处理},props: {value: String // 接受父组件传递的v-model后面值的类型,必须在此注册不然没法使用},methods: {change() {this.$emit('change', this.val1ue)}}
}
</script>

 2.使用.sync

        父组件中

<template><div>父组件{{ sonData }}<Son :value.sync="sonData" /> //通过.sync给value属性绑定属性值为sonData//在这里绑定一个v-model从而测试在父组件中改变时，是否传递到了子组件<el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>

        子组件中

<template><div>子组件{{ value }}<el-input v-model="value" clearable maxlength="200" @input="change" /></div>
</template>
<script>
export default {name: 'Son',props: {value: String //接收父组件传递的参数},methods: {change() {//这里需要注意一定得是 update:接收的参数名 this.$emit('update:value', this.value)}}
}
</script>

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