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却可以有多个**