vue3和vue2 语法差异之v-model详细说明

文章目录

  • 0.前言
  • 1.参考文档
  • 2.详细说明
    • 介绍
    • 2.x 语法
      • 使用 `v-bind.sync`
    • 3.x 语法
      • `v-model` 参数
      • `v-model` 修饰符
    • 迁移策略
  • 3.总结

在这里插入图片描述

0.前言

在 Vue 3 中,v-model 的使用方式与 Vue 2 有一些差异。下面是 Vue 3 中 v-model 的一些主要变化:

  1. 组件上的默认绑定:
    在 Vue 2 中,使用 v-model 绑定自定义组件时,默认情况下会将 value 作为 prop,将 input 事件作为更新模型的事件。而在 Vue 3 中,默认情况下将使用名为 modelValue 的 prop 和 update:modelValue 事件来实现双向绑定。这可以通过在组件内部使用 emits 选项来自定义事件名。

  2. 可以自定义 v-model 的 prop 名称:
    在 Vue 3 中,我们可以通过向 v-model 添加参数来自定义 prop 的名称。例如,可以使用 v-model:customProp 来将 customProp 作为 prop 名称。这使得在自定义组件中更灵活地控制 v-model 的绑定。

  3. 移除了 .sync 修饰符:
    在 Vue 2 中,可以使用 .sync 修饰符来实现双向绑定,即将属性的更新反映到父组件。然而,在 Vue 3 中,.sync 修饰符已被移除。相反,你可以使用参数来实现类似的双向绑定的效果。例如,v-model:propertyName 等同于 :modelValue="propertyName" @update:modelValue="propertyName = $event"

  4. 多个 v-model 绑定:
    在 Vue 2 中,一个组件只能有一个 v-model 绑定。而在 Vue 3 中,你可以在同一个组件上使用多个 v-model 绑定。你可以为每个 v-model 绑定指定不同的 prop 名称和事件名称,使得组件能够处理多个独立的双向绑定。

1.参考文档

Vue 2文档:

  • 官方文档:Vue.js Guide - Global API
  • 官方文档:Vue.js API Reference - Global
  • Vue Mastery课程:Vue.js Essentials - Global API

Vue 3文档:

  • 官方文档:Vue.js Guide - Application Composition
  • 官方文档:Vue.js API Reference - createApp
  • Vue Mastery课程:Vue 3 Fundamentals - Application Instance

2.详细说明

介绍

在 Vue 2.0 发布后,开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop,他们就不得不使用 v-bind.sync。此外,由于v-modelvalue 之间的这种硬编码关系的原因,产生了如何处理原生元素和自定义元素的问题。

在 Vue 2.2 中,我们引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 v-model

在 Vue 3 中,双向数据绑定的 API 已经标准化,以减少开发者在使用 v-model 指令时的混淆,并且更加灵活。

2.x 语法

在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果想要更改 prop 或事件名称,则需要在 ChildComponent 组件中添加 model 选项:

<!-- ParentComponent.vue --><ChildComponent v-model="pageTitle" />
// ChildComponent.vueexport default {model: {prop: 'title',event: 'change'},props: {// 这将允许 `value` 属性用于其他用途value: String,// 使用 `title` 代替 `value` 作为 model 的 proptitle: {type: String,default: 'Default title'}}
}

所以,在这个例子中 v-model 是以下的简写:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

使用 v-bind.sync

在某些情况下,我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此,我们建议使用 update:myPropName 抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:

this.$emit('update:title', newValue)

然后父组件可以在需要时监听该事件,并更新本地的 data property。例如:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见,我们可以使用 .sync 修饰符来缩写,如下所示:

<ChildComponent :title.sync="pageTitle" />

3.x 语法

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent:modelValue="pageTitle"@update:modelValue="pageTitle = $event"
/>

v-model 参数

若需要更改 model 的名称,现在我们可以为 v-model 传递一个参数,以作为组件内 model 选项的替代:

<ChildComponent v-model:title="pageTitle" /><!-- 是以下的简写: --><ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-bind anatomy

这也可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /><!-- 是以下的简写: --><ChildComponent:title="pageTitle"@update:title="pageTitle = $event":content="pageContent"@update:content="pageContent = $event"
/>

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外,现在 3.x 还支持自定义修饰符:

html

<ChildComponent v-model.capitalize="pageTitle" />

查阅关于组件上的自定义 v-model 修饰符的更多信息。

迁移策略

我们推荐:

  • 检查你的代码库中所有使用 .sync 的部分并将其替换为 v-model

    <ChildComponent :title.sync="pageTitle" /><!-- 替换为 --><ChildComponent v-model:title="pageTitle" />
    
  • 对于所有不带参数的 v-model,请确保分别将 prop 和 event 命名更改为 modelValueupdate:modelValue

    <ChildComponent v-model="pageTitle" />
    
    
    // ChildComponent.vueexport default {props: {modelValue: String // 以前是`value:String`},emits: ['update:modelValue'],methods: {changePageTitle(title) {this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`}}
    }
    

[迁移构建开关:]

  • COMPONENT_V_MODEL
  • COMPILER_V_BIND_SYNC

3.总结

以下是对变化的总体概述:

  • 非兼容:用于自定义组件时,v-model prop 和事件默认名称已更改:

    • prop:value -> modelValue
    • 事件:input -> update:modelValue
  • 非兼容v-bind.sync 修饰符和组件的 model 选项已移除,可在 v-model 上加一个参数代替;

  • 新增:现在可以在同一个组件上使用多个 v-model 绑定;

  • 新增:现在可以自定义 v-model 修饰符。

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

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

相关文章

【卷积神经网络】卷积,池化,全连接

随着计算机硬件的升级与性能的提高&#xff0c;运算量已不再是阻碍深度学习发展的难题。卷积神经网络&#xff08;Convolution Neural Network&#xff0c;CNN&#xff09;是深度学习中一项代表性的工作&#xff0c;CNN 是受人脑对图像的理解过程启发而提出的模型&#xff0c;其…

从零基础到精通IT:探索高效学习路径与成功案例

文章目录 导语&#xff1a;第一步&#xff1a;明确学习目标与方向选择适合的IT方向设定具体的学习目标咨询和调研 第二步&#xff1a;系统学习基础知识选择适合的编程语言学习数据结构和算法掌握操作系统和计算机网络基础 第三步&#xff1a;实践项目锻炼技能选择合适的项目编写…

-Webkit-Box 在 Safari 中出现的兼容性问题

一、问题背景&#xff1a; UI要求要实现这样的效果&#xff0c;使用 display:-webket-box在chrome浏览器下完美解决 但是马上啪啪打脸&#xff0c;在safari浏览器下显示空白 &#xff0c;不能不说浏览器之间的兼容性简直就是天坑 二、解决办法 通过浏览器调试发现原本float的…

探索性测试及基本用例

1 测试决策5要素 测试目标&#xff1a;所有的重要任务都完成了&#xff0c;而剩下没做的事情是比较次要的&#xff0c;我们做到这一点就可以尽早尽可能地降低发布风险。 测试方法&#xff1a;测试是一个不断抉择的过程&#xff0c;测试人员必须理解运行测试用例时和分析现有信…

Java算法_ 二叉树的最大深度(LeetCode_Hot100)

题目描述&#xff1a;给定一个二叉树 &#xff0c;返回其最大深度。root 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 获得更多&#xff1f;算法思路:代码文档&#xff0c;算法解析的私得。 运行效果 完整代码 /*** 2 * Author: LJJ* 3 * Date: 2023/…

去年校招面试中Hadoop高频都问些什么?秋招在即,快收藏!

1 总述 校招是远不同于社招的&#xff0c;企业对学生的要求更多的是一些概念性的东西&#xff0c;即所谓的八股文。但有些场景类的题目也是会涉及到&#xff0c;尤其是在一些中大厂的面试题中。场景题固然是能不能中大厂中必不可少的部分&#xff0c;但是基础牢不牢才是能不能…

idea如何建立web项目???

我们需要用到tomcat&#xff0c;没有下在着小伙伴&#xff0c;可以借鉴这篇博客&#xff1a; 如何正确下载tomcat&#xff1f;&#xff1f;&#xff1f;_明天更新的博客-CSDN博客 1.建立普通的Java项目。 2.简单编写index.jsp文件 3.添加tomcat 4.运行服务器 5.构建Servlet 最后…

如何优雅做好项目管理?

导言 项目本身无好坏之分&#xff0c;项目管理有做好与做坏之别。在互联网大厂的体制下&#xff0c;想要做坏一个项目很难&#xff08;可以通过换人、追加资源等方式消除风险&#xff09;&#xff0c;想要做好一个项目不容易&#xff0c;需要团队及PM付出大量心血和精力。在这…

【数据结构】树和二叉树

一、树的概念及结构 1、树的概念 树 是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&a…

基于C#的消息处理的应用程序 - 开源研究系列文章

今天讲讲基于C#里的基于消息处理的应用程序的一个例子。 我们知道&#xff0c;Windows操作系统的程序是基于消息处理的。也就是说&#xff0c;程序接收到消息代码定义&#xff0c;然后根据消息代码定义去处理对应的操作。前面有一个博文例子( C#程序的启动显示方案(无窗口进程发…

HTTP响应状态码大全:从100到511,全面解析HTTP请求的各种情况

文章目录 前言一、认识响应状态码1. 什么是HTTP响应状态码2. Http响应状态码的作用3. 优化和调试HTTP请求的建议 二、1xx 信息响应1. 认识http信息响应2. 常见的信息响应状态码 三、2xx 成功响应1. 认识HTTP成功响应2. 常见的成功响应状态码 四、3xx 重定向1. 认识http重定向2.…

mysql从传统模式切到GTID模式后启动主从,主从异常报错1236

一 前言 MySQL 的主从复制作为一项高可用特性&#xff0c;用于将主库的数据同步到从库&#xff0c;在维护主从复制数据库集群的时候&#xff0c;作为专职的MySQL DBA&#xff0c;笔者相信大多数人都会遇到“Got fatal error 1236 from master when reading data from binary …

日常BUG——SpringBoot关于父子工程依赖问题

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 在父子工程A和B中。A依赖于B&#xff0c;但是A中却无法引入B中的依赖&#xff0c;具体出现的…

全自动模拟量采集软件框架详解

Monitor.Analog采用一种MVVM架构模式&#xff0c;用于将用户界面&#xff08;View&#xff09;与业务逻辑&#xff08;Model&#xff09;进行分离&#xff0c;并通过ViewModel来进行连接和交互。以下是MVVM框架的介绍&#xff1a; 1. Model&#xff08;模型&#xff09;&#x…

【CTF-web】buuctf-[极客大挑战 2019]EasySQL 1(sql注入)

题目链接 根据题目判断出可能需要sql注入&#xff0c;看源码可知数据是通过GET的方式传输的&#xff0c;即放在url的username和password两个参数中。 只要将username输入为1 or 11#&#xff0c;password可以为任何值&#xff0c;即可顺利登录。 需要注意的是url中的井号表示…

【腾讯云 Cloud Studio 实战训练营】在线 IDE 编写 canvas 转换黑白风格头像

关于 Cloud Studio Cloud Studio 是基于浏览器的集成式开发环境(IDE)&#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用Cloud Studio 时无需安装&#xff0c;随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线IDE&#xff0c;包含代码高亮、自动补全、Gi…

8.深浅拷贝和异常处理

开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题: 8.1 浅拷贝 首先浅拷贝和深拷贝只针对引用类型 浅拷贝&#xff1a;拷贝的是地址 常见方法: 1.拷贝对象&#xff1a;Object.assgin() / 展开运算符{…obj} 拷贝对象 2.拷贝数组&#xff1a;Array.prototype.con…

1 树 1.1 树的基本概念 1.1.1 什么是树&#xff1f; 树是n(n > 0)个结点的有限集。当n 0时&#xff0c;称为空树。在任意一颗非空树上应该满足&#xff1a; 有且仅有一个特定的称为根的结点当n>1时&#xff0c;其余结点可分为m&#xff08;m>0&#xff09;个互不相…

微信支付报非法的密钥大小: Caused by: java.security.InvalidKeyException: Illegal key size

在Linux环境中出现 java.security.InvalidKeyException: Illegal key size 异常通常是由于Java默认的加密限制引起的。Java默认的加密强度限制了加密算法密钥的最大长度 方式一 1. 找到该目录 /usr/java/jdk1.8.0_121/jre/lib/security 2. 替换local_policy.jar 和 US_export_…

单因素多变量方差分析

多变量方差分析&#xff1a;是对多个独立变量是否受单个或多个因素影响而进行的方差分析。它不仅能够分析多个因素对观测变量的独立影响&#xff0c;更能够分析多个因素的交互作用能否对观测变量产生影响。本章以单因素多变量分析为例&#xff0c;即一个分组变量和多个欲分析的…