vue2.x/3.x的v-model变化差异

最新推荐文章于 2024-04-09 14:48:57 发布
最新推荐文章于 2024-04-09 14:48:57 发布
阅读量160 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suk__/article/details/118658537
版权

我们都知道v-model是value属性和input事件两者的语法糖,这里说一下2和3的变化

vue2的v-model:

子组件中接收的prop必须key为value,修改value的事件中只做一件事:emit('input',value),将要修改的值通知给父组件

vue3的v-model:

子组件中接收的prop的key由value改成了modelValue,修改value的事件中触发的自定义事件名改为了emit('update:modelValue',modelValue)
 

vue3中v-model的默认key不再是value而是modelValue,因为vue3支持多个v-model

williamyi74
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3.0与Vue2.0的v-model的使用区别
weixin_42555053的博客
04-06 2266
v-model 升级 在使用 Vue 3 之前就了解到 v-model 发生了很大的变化， 使用过了之后才真正的 get 到这些变化， 我们先纵观一下发生了哪些变化， 然后再针对的说一下如何使用： 变更：在自定义组件上使用v-model时， 属性以及事件的默认名称变了 变更：v-bind的.sync修饰符在 Vue 3 中又被去掉了, 合并到了v-model里 新增：同一组件可以同时设置多个 v-model 新增：开发者可以自定义 v-model修饰符 有点懵？别着急，往下看 在 Vue2 中， 在组件上使
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
在Vue3.x中，创建Vue实例时，不再需要手动为每个属性定义getter和setter，而是通过`Proxy`对整个数据对象进行代理。当尝试访问或修改数据时，`Proxy`会捕获这些操作并执行相应的响应逻辑。 ```javascript const app...
Vue3和Vue2 v-model的变化
weixin_43416349的博客
10-19 69
v-model:title= = :title= @update:title= 对于所有不带参数的v-model，请确保分别将 prop 和 event 命名更改为modelValue和update:modelValue v-model= = :modelValue= @update:modelValue=
vue2中自定义组件的v-model
风如也的博客
07-08 2579
工作中经常会涉及到父子组件数据更新和页面相应数据样式改变的问题。 通俗点来说，就是涉及到公共组件的可以抽离出来作为子组件，如果父组件中与子组件相关的数据改变，子组件中的数据也会改变，如果子组件的数据改变，则需要做一定的处理才能改变父组件中的相关数据。 处理方式：考虑使用 自定义组件的v-model（vue2 中方式） 父组件 <search-tab :list="list" v-model="active" /> ... export default { data(){ return {
Vue2 和 Vue3 中的 v-model 的区别
qq1319504645的博客
07-15 1180
v-model 是 Vue 中使用频率特别高的一个指令，而 Vue3 中的 v-model 有了很大的变化，本文将详细讲述一下 Vue2 和 Vue3 中的 v-model 的区别。
讲讲Vue3的v-model语法糖~（内含Vue2写法的回顾）
m0_58875280的博客
09-11 1265
晚上好呀朋友们，最近做了一个Vue3的项目，可能最近会多多写有关于Vue3的知识点。 本文会写到Vue3中v-model的语法糖原理，以及回顾Vue2中V-model的知识点。
18.（vue3.x+vite）组件间通信方式之v-model.rar
09-20
本示例"18.（vue3.x+vite）组件间通信方式之v-model.rar"将深入探讨如何在Vue 3.x和Vite构建环境中利用`v-model`进行组件间的双向数据绑定。 首先，Vue 3.x中的`v-model`不再局限于输入元素，而是扩展到了自定义...
vue3.x中使用cesium，vue3.x+Cesium
05-04
Vue3.x是一个流行的JavaScript前端框架，它提供了许多优化和改进，使得开发更加高效。Cesium则是一个强大的3D地球浏览器库，广泛应用于地理信息系统、虚拟现实和游戏开发等领域。将Cesium集成到Vue3.x项目中，可以...
5.（vue3.x+vite）v-if与v-show区别.rar
09-15
在Vue.js框架中，`v-if` 和 `v-show` 都是用于条件渲染的指令，它们的作用都是根据表达式的值来决定是否...在使用Vue3.x和Vite进行项目开发时，理解`v-if` 和 `v-show` 的区别能帮助我们更好地优化代码，提升应用性能。
electron打包错误的问题: Get "/11.0.4/electron-v11.0.4-win32-x64.zip"
12-11
electron的2020年12月11日最新的electron-v11.0.4-win32-x64.zip包，由于打包的时候要到Github上下载这个资源特变慢，而且没有这个包会打包失败。 用法是：将文件复制到这个路径：C:\Users\dong\AppData\Local\...
Vue2、Vue3中v-model的本质以及作用在组件上的用法（简单易懂）
张先生的前端日志
02-21 437
在表单输入元素或组件上创建双向绑定
Vue3与Vue2--- v-model语法糖
weixin_55690518的博客
09-11 1273
v-model在vue中很重要，实现数据与视图的双向绑定，但在Vue2和Vue3中，v-model的使用还有有区别的。v-model本质上就是绑定属性和事件的结合。 1、vue2中v-model的应用场景 （1）在vue2中，v-model绑定的:value属性，和input事件。当然v-model可以绑定在DOM上，也可以绑定在组件上 <template> <div> <div>v-model指令用法</div> &l...
v-model参数变化（vue3.x）
weixin_46351593的博客
05-23 1914
文章目录v-model概述2.x 语法使用 `v-bind.sync`3.x 语法`v-model` 参数`v-model` 修饰符vue2.x父子组件传值案例vue3.x父子组件传值案例 v-model概述 在 Vue 2.0 发布后，开发者使用 v-model 指令必须使用为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问
极速上手 VUE 3—v-model 的使用变化
前端人的博客
11-02 3531
本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。 一、Vue2 中 v-model 的使用 v-model 是语法糖，本质还是父子组件间的通信。父子组件通信时有两种方式： 父给子传值：通过 props 子给父传值：通过 Events up，使用 $emit 触发事件。 1.1、父组件给子组件传值 父组件代码 <child :msg="msg" /> <script> export default{ data(){ return{
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-09 1万+
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
v-model语法糖
weixin_71171795的博客
01-09 4727
v-model语法糖
vue2 自定义组件如何使用v-model
letianxf的博客
12-24 4869
vue2 自定义组件如何使用v-model
vue2 组件v-model
weixin_44755522的博客
11-17 5859
vue2组件v-model
vue3子组件update:modelValue不生效问题
qq_35919264的博客
01-07 3310
这个是看到的文章 我去看了一眼，可能我跟他的问题是一样的，用event去做绑定 <ChildComponent :title=“title” @update:title = “title = $event” /> 也就是加上 @update:title = “title = $event” 测试成功
Vue3.x升级与cli脚手架实战
在Vue 3.x中，虽然大部分配置与Vue 2.x类似，但可能需要关注官方文档中的新变化，例如`filenameHashing`选项，以及根据生产环境调整`debug`设置。 在迁移过程中，开发者需要注意以下几点： - Vue 3.x对ES6语法有更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值