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,写成其他名字将会报错!

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

Runway
Runway

Runway是一个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前端入门

相关专题

更多
PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

11

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

83

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

109

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

154

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

79

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

44

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

20

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

133

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

45

2026.01.15

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
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号