Vue2的v-model和Vue3的v-model区别

原创 已于 2022-11-11 16:38:36 修改 · 2.2k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
7 篇文章 0 人学习
订阅专栏 查看详情
于 2022-11-11 10:00:19 首次发布
本文详细介绍了Vue中自定义组件的v-model和.sync修饰符的使用，以及在 Vue2 中如何处理组件的双向数据绑定。在Vue3中，v-model进行了调整，绑定的值改为modelValue，事件为update:modelValue，简化了复杂场景的绑定问题。文章探讨了如何在组件封装中处理多个值的绑定，并提供了相关示例和参考资料。

前言：单向数据流，父组件传给子组件的数据，子组件只能展示，不能修改，如果需要修改则需要emit事件让父组件修改

自定义组件的v-model,实际就是传递值和接收一个事件的简写。

先看官方文档

总结来说就是传递下去一个值，接收的一个事件，有些时候，一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用，但是存在value另有含义，或者不能使用input触发的情况，这时候我们就不能使用v-model进行简写了。就比如说选择框，绑定的值是checked而不是value，接收事件不是input而是change。为了解决这个问题，尤雨溪在Vue2.2中，引入了model组件选项，也即是说你可以通过model来指定v-model绑定的值和属性。

我们有封装组件的需求而且需要将子组件的数据随请求发送。我们希望数据定义在父组件，然后子组件改变父组件也一起改变

 

但是这样的话写起来很麻烦，而且v-model只能绑定一个值，这样的话我的组件封装不是只能改变一个值了，这样好像也不符合开发。

于是乎

 .sync和v-model类似，就是传递值和接收事件的简写。这样的话我们就可以不用写model了。直接告诉我更新那个值

如果绑定多个值我们可以传递一个对象下去，使用computed去简写更新，不用每个值都触发一次

 又是v-model又是.sync记不住啊，vue3又删除了.sync

我们通过上面知道vue2.x中既然v-model的主要原因是由于value和input事件可能另有它用，那么我们可不可以直接使用另外的属性和方法，而不需要去通过model进行定义。vue3中就实现了这个功能，v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue。使用方法如下

 

参考文档   Vue3中v-model的使用 - 知乎

 vue 2 实现自定义组件一到多个v-model双向数据绑定的方法 - 码农教程

vue 2 实现自定义组件一到多个v-model双向数据绑定的方法_Dobility的博客-CSDN博客_v-model绑定多个值

 谈谈对.sync修饰符的理解 - 知乎

v-model基本用法及给组件绑定多个v-model - 吴小明- - 博客园
.sync 修饰符实现双向绑定_Be____nice的博客-CSDN博客

标签
#前端
vue2与vue3 v-model的区别
每天都要努力学习哦~~
10-02 2469
data() {return {count: 1
v-model在vue2与vue3中的区别
刘运召的博客
10-02 3670
v-model在vue2与vue3中的区别，v-model主要是用在表单 、 及 元素上创建双向数据绑定。它会更具控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据
Vue2 和 Vue3 中的 v-model 的区别
qq1319504645的博客
07-15 1401
v-model 是 Vue 中使用频率特别高的一个指令，而 Vue3 中的 v-model 有了很大的变化，本文将详细讲述一下 Vue2 和 Vue3 中的 v-model 的区别。
【Vue2-ElementUI】:model、v-model、prop
最新发布
2401_84926677的博客
04-06 645
本文详细解析了Vue2+ElementUI表单开发中的三个核心语法：:model、v-model和prop。：model作为表单数据容器单向绑定数据源，v-model实现输入控件的双向数据绑定，prop则关联表单项与校验规则。三者协同工作，共同完成表单数据收集、校验和提交功能。文章通过日期查询表单示例，阐述了从初始化、用户操作到接口请求的完整流程，并强调了各语法的特性和注意事项，为表单开发提供了系统性的指导。
vue2和vue3组件v-model区别
老电影故事的博客
06-19 2506
单向数据流，父组件传给子组件的数据，子组件只能展示，不能修改，如果需要修改则需要emit事件让父组件修改有些时候，一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用，但是存在value另有含义，或者不能使用input触发的情况，这时候我们就不能使用v-model进行简写了。就比如说选择框，绑定的值是checked而不是value，接收事件不是input而是change。为了解决这个问题，尤雨溪在Vue2.2中，引入了model组件选项。
vue2和vue3的v-model
qq_41194539的博客
05-26 1039
v-model指双向数据绑定，分为表单元素绑定和组件绑定两种，是一个语法糖。
vue2、vue3中自定义v-model的使用和区别
HTHQ12345的博客
03-31 2136
在我们的日常开发中，时常需要写一些自定义组件，而其中可能就会使用到v-model，v-model是Vue中的一个指令，用来实现数据的双向绑定，实现数据、视图更新，v-model是一个语法糖，，我们可以自定义v-model指令的部分内容。 vue2中自定义v-model 在vue2中想要自定义v-model，我们需要在组件中设定model变量 export default { name:'SlideOption', model:{ // 激活的下标值 prop:'activeIndex
vue3和vue2 v-model 和sync语法糖区别
qq_37212396的博客
05-20 678
随着Vue3的发布，该版本带来了许多新特性和改进，其中包括对v-model和sync语法糖的优化。在Vue2中，我们通常使用v-model和.sync语法糖来实现双向数据绑定，那么在Vue3中，这些语法糖有什么新变化呢？
v-model ，在 vue3和 vue2中的区别
edwardwzw的博客
08-30 566
Vue 3 的 v-model 设计更简洁、灵活，减少了配置成本，同时支持更复杂的双向绑定场景，是对 Vue 2 语法的重要改进。
vue2和vue3中响应式数据的区别 以及v-model原理
weixin_63677137的博客
11-06 318
当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新。
vue2和vue3的v-model的区别
c347087870的博客
05-08 1388
v-model 你可以用 v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理 vue2的v-model 原理还是传递一个value参数和绑定了一个input事件 <template> <div> <.
web前端面试高频考点——Vue3.x深入理解（v-model参数用法、watch和watchEffect区别、Vue3快于Vue2、Vite启动快的原因）
HuoZhiyan 的博客
09-05 1201
web前端面试高频考点——Vue3.x深入理解（v-model参数用法、watch和watchEffect区别、Vue3快于Vue2、Vite启动快的原因）
vue3中v-model和vue2中v-model的区别
haodanzj的博客
09-15 279
v-model可以用到表单元素上 双向数据绑定: 页面数据变化,绑定的数据页会跟着变化 绑定的数据变化,页面也会跟着变化 <input v-model='uname'/> 等价于 <input :value='uname' @input='uname=$event.target.value'/> v-model可以用到组件上:父子之间数据交互是双向的 1.vue2: <my-com v-model='info'/> <my-com :value='info' .
vue2和vue3的v-model用法区别
song854601134的博客
03-02 477
vue2中 可以给v-model在自定义组件上使用 vue3使用@update:modelVlaue来代替了vue2的v-model
v-model的原理 ？vue2和vue3v-model的区别？
m0_50511175的博客
03-02 363
v-model 原理：本质是「绑定值（如 value/modelValue） + 监听输入事件（如 input/update:modelValue）」的语法糖，实现双向数据绑定。Vue2 vs Vue3 核心区别组件默认绑定：Vue2 用valueinput，Vue3 用modelValue；多值绑定：Vue2 依赖.sync，Vue3 直接用统一语法；修饰符：Vue3 提供了更规范的处理方式，Vue2 需手动处理。原生表单元素的v-model。
vue2 与vue3 中v-model的区别
KLW75
12-21 267
Vue3将v-model的设计原理进行了改造，v-model不再单纯是“v-bind：value”与“v-on：input”的结合，已经演化为“v-bind：modelValue”与“v-on：['update：modelValue']”的结合，直接绑定modelValue并且监听update：modelValue就可以实现v-model双向数据绑定的操作。在Vue2中，可以在子组件标签上用v-model来实现父子组件之间的双向通信，它的本质是“v-bind：value”与“v-on：input”的结合。
vue2、vue3中的v-model的区别以及为什么vue3废弃.sync修饰符
个人博客
01-04 2240
学习自官网
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值