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,一经查实,立即删除!

相关文章

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) 专门用于管理数据库的计算机系统软件;…

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

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

[软件工具]批量根据文件名查找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…

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

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

【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永…

Java中优雅实现泛型类型的强制转换

在Java中经常遇到将对象强制转换成泛型类的情况&#xff1a; Map<String, Object> data Map.of("name", "XiaoMing","age", 17,"scores", List.of(80, 90, 70) );List<Integer> scores (List<Integer>) data.get…

ASP.NET数据存储与交换系统设计

摘 要 该系统以Microsoft Visual Studio 2003作为开发工具&#xff0c;选用SQL Server 2000数据库来实现数据存储&#xff0c;并设计开发了一种基于B/S模式的数据存储与交换系统。该系统完成了用户注册管理、后台管理和用户空间管理功能&#xff1b;为每个用户提供了个人的存…

数据结构中的栈(C语言版)

一.栈的概念 栈是一种常见的数据结构&#xff0c;它遵循后进先出的原则。栈可以看作是一种容器&#xff0c;其中的元素按照一种特定的顺序进行插入和删除操作。 压栈&#xff1a;栈的插入操作叫做进栈/压栈/入栈&#xff0c;入数据在栈顶。 出栈&#xff1a;栈的删除操作叫做…

区块链技术:DAPP开发

随着科技的飞速发展&#xff0c;区块链技术逐渐渗透到各个领域&#xff0c;其中DAPP&#xff08;去中心化应用&#xff09;的发展尤为引人注目。作为一种新型的应用程序&#xff0c;DAPP正在重塑未来商业生态&#xff0c;其潜力无可估量。 一、DAPP的定义和特点 DAPP是指基于…

基于ssm+vue+Mysql的房屋租赁系统求租合同

开发语言&#xff1a;Java框架&#xff1a;ssmJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.…

交通运输智慧监管平台---强化物流安全与效率的新举措

一、建设背景 随着社会对于交通安全和环境保护的要求不断提高&#xff0c;对卡车运输的监管和合规性要求也逐渐加强。为了满足快速发展的物流需求&#xff0c;提高供应链协同和可追溯性、解决安全问题、提高运输效率和降低成本&#xff0c;我们利用现代技术和信息化手段着力建设…

ctfshow——SQL注入

文章目录 SQL注入基本流程普通SQL注入布尔盲注时间盲注报错注入——extractvalue()报错注入——updataxml()Sqlmap的用法 web 171——正常联合查询web 172——查看源代码、联合查询web 173——查看源代码、联合查询web 174——布尔盲注web 176web 177——过滤空格web 178——过…

nginx下载安装配置(含ssl)

下载安装环节 wget https://nginx.org/download/nginx-1.24.0.tar.gz tar -zxvf xxx.tar.gz yum -y install pcre-devel openssl openssl-devel ./configure --prefix/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-stream make & make i…

HTTP协议 --中

http状态码 当浏览者访问一个网页时&#xff0c;浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前&#xff0c;此网页所在的服务器会返回一个包含HTTP 状态码的信息头&#xff08; server header &#xff09;用以响应浏览器的请求。 HTTP 状态码的英文为…