vue修饰符v-model及.sync原理及区别详解

更新时间：2022年07月26日 16:45:29 作者：佑子呀

这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

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
        }
    }
}

.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修饰符的区别

.sync与v-model区别是

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

区别点：

格式不同。 v-model="num", :num.sync="num"
v-model： @input + value
:num.sync: @update:num
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:属性名,所以它有多个事件名,就可以使用多次

总结作用场景：

props/$emit是父子组件最常用的通信方式，而v-model、.sync只是其语法糖
子组件只是单一的修改某个父组件值的话，表单类组件使用v-model语法糖
子组件只是单一的修改某个父组件值的话，非表单类组件使用sync语法糖
复杂逻辑还是老老实实props/$emit

其实语法糖只是在父组件用的时候更加方便，而子组件该咋样还是咋样。

以上就是vue修饰符v-model及.sync原理及区别详解的详细内容，更多关于vue修饰符v-model .sync的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue Proxy数据代理进行校验部分源码实例解析
Proxy提供了强大的Javascript元编程,有许多功能,包括运算符重载,对象模拟,简洁而灵活的API创建,对象变化事件,甚至Vue 3背后的内部响应系统提供动力,这篇文章主要给大家介绍了关于vue Proxy数据代理进行校验部分源码解析的相关资料,需要的朋友可以参考下
2022-01-01
vue项目打包自动更新版本号且自动刷新缓存的方法示例
这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2024-11-11
vue-admin-template 动态路由的实现示例
本文主要介绍了ue-admin-template动态路由的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
vue项目打包后,由于html被缓存导致出现白屏的处理方案
这篇文章主要介绍了vue项目打包后,由于html被缓存导致出现白屏的处理方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
使用WebStorm开发Vue3项目及其他问题详解
这篇文章主要介绍了在WebStorm中配置Vu3项目的详细步骤,还解决了ElementPlus与Sass版本兼容性问题,并提供了详细的配置和运行步骤,需要的朋友可以参考下
2025-02-02
Vue + Webpack + Vue-loader学习教程之相关配置篇
这篇文章主要介绍了关于Vue + Webpack + Vue-loader的相关配置篇，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
SyntaxError: /xx.vue: Unexpected token, expected “,“错误解
这篇文章主要为大家介绍了SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-08-08
自定义input组件如何实现拖拽文件上传
这篇文章主要介绍了自定义input组件如何实现拖拽文件上传问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue实现pdf文档在线预览功能
这篇文章主要为大家详细介绍了vue实现pdf文档在线预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
vue2.0页面前进刷新回退不刷新的实现方法
这篇文章主要介绍了vue2.0页面前进刷新回退不刷新的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07