vue2迁移到vue3,v-model的调整

项目从vue2迁移到vue3,v-model不能再使用了,需要如何调整?

下面只提示变化最小的迁移,不赘述vue2和vue3中的常规写法。

vue2迁移到vue3,往往不想去调整之前的代码,以下就使用改动较小的方案进行调整。

In terms of what has changed, at a high level:

  • BREAKING: When used on custom components, v-model prop and event default names are changed:
    • prop: value -> modelValue;
    • event: input -> update:modelValue;
  • BREAKING: v-bind's .sync modifier and component model option are removed and replaced with an argument on v-model;
  • NEW: Multiple v-model bindings on the same component are possible now;
  • NEW: Added the ability to create custom v-model modifiers.

For more information, read on!

以上文档来自v-model | Vue 3 Migration GuideGuide on migrating from Vue 2 to Vue 3icon-default.png?t=N7T8https://v3-migration.vuejs.org/breaking-changes/v-model.html

翻译结果:

就发生的变化而言,在高水平上:
BREAKING:在自定义组件上使用时,v模型道具和事件默认名称会发生更改:
prop:value->modelValue;
event:input->update:modelValue;
BREAKING:v-bind的.sync修饰符和组件模型选项被删除,并替换为v-model上的一个参数;
新功能:现在可以在同一组件上进行多个v模型绑定;
新增:增加了创建自定义v型模型修改器的功能。
有关更多信息,请继续阅读!

下面看代码调整:

简单写一个例子(vue2): 

<template><view @click="onAdd">{{ value }}</view>
</template>
<script>
export default {props: {value: Number},methods: {onAdd(){this.$emit('input', this.value + 1)}}
}
</script>

上面改成(vue3)

<template><view @click="onAdd">{{ modelValue }}</view>
</template>
<script>
export default {props: {modelValue: Number},methods: {onAdd(){this.$emit('update:modelValue', this.value + 1)}}
}
</script>

 下面将支出vue2迁至vue3需要修改的地方,见下图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/830797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3 中setup模式下component标签 is属性动态绑定组件空白显示问题

先看官网说明&#xff1a; <!-- 组件会在 currentTabComponent 改变时改变 --> <component v-bind:is"currentTabComponent"></component>在上述示例中&#xff0c;currentTabComponent 可以包括 已注册组件的名字&#xff0c;或 一个组件的选项…

美国洛杉矶服务器托管需要了解什么?

美国洛杉矶拥有多个数据中心提供服务器托管服务&#xff0c;这些服务通常包括弹性云服务器、裸金属服务器等。以下是一些关于美国洛杉矶服务器托管的详细信息&#xff0c;rak部落小编为您整理发布。 1. **数据中心分布**&#xff1a;在洛杉矶有多处数据中心&#xff0c;它们提供…

CVPR 小样本土地覆盖制图 张洪艳教授团队获挑战赛冠军

提出了一个广义的基于少镜头分割的框架&#xff0c;以更新高分辨率土地覆盖制图中的新类&#xff0c;分为三个部分:(a)数据预处理:对基础训练集和新类的少镜头支持集进行分析和扩充;(b)混合分割结构:将多基学习器和改进的投影到正交原型(POP)网络相结合&#xff0c;增强基类识别…

CSS中文本样式(详解网页文本样式)

目录 一、Text介绍 1.概念 2.特点 3.用法 4.应用 二、Text语法 1.文本格式 2.文本颜色 3.文本的对齐方式 4.文本修饰 5.文本转换 6.文本缩进 7.color&#xff1a;设置文本颜色。 8.font-family&#xff1a;设置字体系列。 9.font-size&#xff1a;设置字体大小。…

Laravel5.4 反序列化

文章目录 0x01 环境搭建0x02 POP 链0x03 exp0x04 总结 前言&#xff1a;CC 链复现的头晕&#xff0c;还是从简单的 Laravel 开始吧。 laravel 版本&#xff1a;5.4 0x01 环境搭建 laravel安装包下载地址 安装后配置验证页面。在 /routes/web.php 文件中添加一条路由&#xf…

数据库基础--MySQL简介以及基础MySQL操作

数据库概述 数据库&#xff08;DATABASE&#xff0c;简称DB&#xff09; 定义:是按照数据结构来组织、存储和管理数据的仓库.保存有组织的数据的容器(通常是一个文件或一组文件) 数据库管理系统(Database Management System,简称DBMS) 专门用于管理数据库的计算机系统软件;…

共享旅游卡项目如何做线上运营?分享运营的3个核心点!

疫情三年下来&#xff0c;还能保持活跃的实体行业&#xff0c;可能就是旅游行业。别看很多美食餐饮的&#xff0c;看起来很赚钱&#xff0c;除开成本&#xff0c;其实也是赚点辛苦钱。 从2023年疫情放开&#xff0c;很多人都涌入到旅游行业。但因为绝大多数都是门外汉&#xf…

iBarcoder for Mac:一站式条形码生成软件

在数字化时代&#xff0c;条形码的应用越来越广泛。iBarcoder for Mac作为一款专业的条形码生成软件&#xff0c;为用户提供了一站式的解决方案。无论是零售、出版还是物流等行业&#xff0c;iBarcoder都能轻松应对&#xff0c;助力用户实现高效管理。 iBarcoder for Mac v3.14…

算法人生(14):从“探索平衡策略”看“生活工作的平衡之道”

在强化学习中&#xff0c;有一种策略叫“探索平衡策略Exploration-Exploitation Trade-off&#xff09;”&#xff0c;这种策略的核心是在探索未知领域&#xff08;以获取更多信息&#xff09;和利用已知信息&#xff08;来最大化即时回报&#xff09;之间寻求平衡&#xff0c;…

[软件工具]批量根据文件名查找PDF文件复制到指定的地方,如何批量查找文件复制,多个文件一起查找复制

多个文件目录下有多个PDF, 如何根据文件名一个清单&#xff0c;一次性查找多个PDF复制保存 如图所示下面有7个文件夹&#xff0c;每个文件夹里面有几百上千PDF文件 如何从上千个PDF文件中一次性快速找到我们要的文件呢 &#xff1f; 我们需要找到文件名是这样的PDF&#xff0…

vue3 jspdf,element table 导出excel、pdf,横板竖版分页

多个表格需要&#xff0c;pdf需要的格式与原本展示的表格样式不同 1.创建一个新的表格&#xff0c;设置pdf需要的样式&#xff0c;用vue的h函数放入dom中 2.excel用xlxs插件直接传入新建el-table的dom,直接导出 3.pdf导出类似excel黑色边框白底黑字的文件&#xff0c;把el-t…

数据结构===栈

文章目录 栈的定义实现一个栈用数组实现栈用链表实现栈支持动态扩容的栈 栈的应用小结 栈的定义 栈是一种先进后出的数据结构。它的操作受限。 栈&#xff0c;是一种先进后出&#xff0c;或者后进先出的数据结构。跟数组和链表相比&#xff0c;有一定的限制性。毕竟&#xff0…

有哪些开源协议?

目前存在多种开源协议&#xff0c;它们各自有不同的特点和适用场景&#xff0c;旨在保护开发者权利的同时促进软件的共享和协作。以下是几种常见的开源协议&#xff1a; MIT License&#xff08;麻省理工学院许可证&#xff09;&#xff1a; 非常宽松的许可&#xff0c;基本上允…

文件导入导出【开发实践】

文章目录 一、背景和基础知识1.1 文件导入1.2 文件导出1.3 技术背景1.4 Excel的基本知识1.5 文件导入/导出流程 二、使用EasyExcel完成读写Excel操作2.1 创建实体类并完成映射2.1.1 用在字段上的注解2.1.1.1 ExcelProperty&#xff08;最重要&#xff09;2.1.1.2 ColumnWidth2.…

低代码工业组态数字孪生平台

2024 两会热词「新质生产力」凭借其主要特征——高科技、高效能及高质量&#xff0c;引发各界关注。在探索构建新质生产力的重要议题中&#xff0c;数据要素被视为土地、劳动力、资本和技术之后的第五大生产要素。数据要素赋能新质生产力发展主要体现为&#xff1a;生产力由生产…

springcloud中Gateway基本配置包含原理与示例

Gateway基本配置包含原理与示例 一、Gateway简介 Gateway是Spring Cloud生态系统中的一个基于Spring Framework 5&#xff0c;Project Reactor和Spring Boot 2的API网关服务。它旨在为微服务架构提供一种简单而有效的方式来路由请求、过滤请求以及对请求进行转换。Gateway可以…

【linuxC语言】fcntl和ioctl函数

文章目录 前言一、功能介绍二、具体使用2.1 fcntl函数2.2 ioctl函数 三、拓展&#xff1a;填写arg总结 前言 在Linux系统编程中&#xff0c;经常会涉及到对文件描述符、套接字以及设备的控制操作。fcntl和ioctl函数就是用来进行这些控制操作的两个重要的系统调用。它们提供了对…

Visual Studio中怎样更改Nuget程序包源

场景 Visual Studio 2019 在使用NuGet添加依赖包时&#xff0c;在预览中搜索不到程序包。 排查下NuGet的程序包源为本地。 将程序包源修改下。 实现 在解决方案上右击选择管理解决方案中的NuGet程序包(在 Visual Studio 中打开“工具”>“选项”>“NuGet 包管理器”…

请求路径引发的http308错误

记录一个请求路径输错引发的问题。 正确路径&#xff1a; /user/bind-email 请求路径我们如果输错故意多打一个s /user/bind-emails 正常预检请求会报错404未找到&#xff0c;我们下意识的就去排查路径是不是写错了 但是如果多打一个/ /user//bind-email 此时预检请求会报308永…

Linux 指令lsblk 作用,以及查看cpu使用情况和磁盘IO iostat指令详解

lsblk 指令 在Linux系统中&#xff0c;lsblk&#xff08;列表块设备&#xff09;命令是一个非常实用的工具&#xff0c;用于显示所有可用的块设备信息&#xff0c;如硬盘、USB驱动器、SD卡以及它们的分区。这个命令以易于理解的树状结构展示这些信息&#xff0c;清晰地表明了设…