Vue中的 v-model 和 .sync 的原理和区别

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：详细介绍了v-model 和 .sync 的原理和区别，如果有不合理的地方，请各位大佬指教

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、v-model 和 .sync 的原理

1· v-model

• v-model的本质,其实就是:value和@input事件的语法糖

    <!--v-model写法-->
    <my-component type="text" v-model="num">
    <!--展开语法糖后的写法-->
    <my-component type="text"
      :value="num"
      @input="(value) => num = value"
    >

父组件通过向子组件传值和自定义事件,子组件里面通过$emit去触发input事件

• 注意点: 在子组件中 这个input事件是自定义事件

// 在子组件中
<template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('input',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

2· .sync

// 在父组件中
    <my-component :value.sync="num" />

// 子组件中
    <template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('update:value',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

“监听一个触发事件”=“(val) => value = val”。

二、v-model和.sync修饰符的区别

1.相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

2.区别点：
2.1 格式不同。 v-model=“num”, :num.sync=“num”
2.2 v-model： @input + value
2.3 :num.sync: @update:num
2.4 v-model只能用一次；.sync可以有多个。

只不过v-model默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。比较单一，不能有多个。

// 子组件可以用自定义事件，来替换v-model默认对应的原生input事件，只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},

复制代码

一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

因为使用v-model,子组件中只能触发一个input事件,事件名是唯一的,而.sync修饰符,它触发的时间名是updata:属性名,所以它有多个事件名,就可以使用多次

三·作用场景：

3.1 props/$emit是父子组件最常用的通信方式，而v-model、.sync只是其语法糖
3.2 子组件只是单一的修改某个父组件值的话，表单类组件使用v-model语法糖
3.3 子组件只是单一的修改某个父组件值的话，非表单类组件使用sync语法糖
3.4 复杂逻辑还是建议使用 props/￥emit （使用英文的￥符号哈，这边不好展示）