0

0

修饰符v-model与.sync有什么区别?差异对比浅析

青灯夜游

青灯夜游

发布时间:2022-07-11 20:37:02

|

2592人浏览过

|

来源于掘金社区

转载

修饰符v-model与.sync有什么区别?下面本篇文章给大家聊聊v-model与.sync修饰符的差异,希望对大家有所帮助!

修饰符v-model与.sync有什么区别?差异对比浅析

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

一、v-model

1. 作用

相信过使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行元素上数据的双向绑定的。(学习视频分享:vue视频教程

 例如:




当我们在input框里输入了某个值的时候,下面data里的value就可以直接后去到我们输入的值,而不需要操作dom元素进行获取。

1. 本质

v-model本质上来说是一个语法糖,我们习惯性的写法是这样的:

 

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

通过对比语法糖和原始写法可以得出: 再给元素添加v-model属性时,默认会把value作为元素的属性,然后把input事件作为实时传递value的触发事件。

注意:不是所有能进行双向数据绑定的元素都是input事件!

3、特殊用法

一般情况下,我们使用v-model主要是用于数据的双向绑定,可以十分方便的获取到用户输入的值,但在某些特殊情况下,我们也可以将v-model用于父子组件之间数据的双向绑定。



这里定义了一个father组件和son组件,并且将son组件引入到father组件中,给son组件绑定了v-model进行了传值。此时我们需要在son组件中接收并使用这个值:


注意:这里接受的值必须是value,写成其他名字将会报错!

父组件向子组件传值,子组件中是不能直接修修改数据的,直接修改的话就会报错

WeShop唯象
WeShop唯象

WeShop唯象是国内首款AI商拍工具,专注电商产品图片的智能生成。

下载

1.png

当我们需要修改这个值时,就需要再将其传入到父组件中修改。

这就需要在父组件中的子组件上定义一个自定义事件,通过子组件$emit('自定义事件名称','值')的方法将值传入父组件。

但是在这里我们不能使用自定义事件,因为我们用的是v-model传值,所以我们只能使用input事件进行修改。

子组件中使用$emit()方法.调用父组件中的事件,并且进行传值



这样就完成父子组件之间的数据双向绑定效果

二、.sync修饰符

1、作用

.sync修饰符可以实现父子组件之间的双向绑定,并且可以实现子组件同步修改父组件的值,相比较与v-model来说,sync修饰符就简单很多了:

2、本质

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

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

总结

v-model与.sync: 相同点:都是语法糖,都可以实现父子组件中的数据通信。

不同点:格式不同,v-model="num"          :num.sync="num"

v-model:@input+value                 :num.sync:@update:num

还有就是,v-model只能使用一次,.sync可以使用多个。

【相关视频教程推荐:vuejs入门教程web前端入门

相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

55

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ReactJS中文基础视频教程
ReactJS中文基础视频教程

共14课时 | 3.1万人学习

React.JS中文基础视频教程
React.JS中文基础视频教程

共14课时 | 3万人学习

React 基础精讲视频教程
React 基础精讲视频教程

共14课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号