当前位置: 首页 > news >正文

《Vue3实战教程》19:Vue3组件 v-model

如果您有疑问,请观看视频教程《Vue3实战教程》

组件 v-model​

基本用法​

v-model 可以在组件上使用以实现双向绑定。

从 Vue 3.4 开始,推荐的实现方式是使用 defineModel() 宏:

vue

<!-- Child.vue -->
<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div>Parent bound v-model is: {{ model }}</div><button @click="update">Increment</button>
</template>

父组件可以用 v-model 绑定一个值:

template

<!-- Parent.vue -->
<Child v-model="countModel" />

defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改,不过它能起到在父组件和当前变量之间的双向绑定的作用:

  • 它的 .value 和父组件的 v-model 的值同步;
  • 当它被子组件变更了,会触发父组件绑定的值一起更新。

这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上,在提供相同的 v-model 用法的同时轻松包装原生 input 元素:

vue

<script setup>
const model = defineModel()
</script><template><input v-model="model" />
</template>

演练场示例

底层机制​

defineModel 是一个便利宏。编译器将其展开为以下内容:

  • 一个名为 modelValue 的 prop,本地 ref 的值与其同步;
  • 一个名为 update:modelValue 的事件,当本地 ref 的值发生变更时触发。

在 3.4 版本之前,你一般会按照如下的方式来实现上述相同的子组件:

vue

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template><input:value="props.modelValue"@input="emit('update:modelValue', $event.target.value)"/>
</template>

然后,父组件中的 v-model="foo" 将被编译为:

template

<!-- Parent.vue -->
<Child:modelValue="foo"@update:modelValue="$event => (foo = $event)"
/>

如你所见,这显得冗长得多。然而,这样写有助于理解其底层机制。

因为 defineModel 声明了一个 prop,你可以通过给 defineModel 传递选项,来声明底层 prop 的选项:

js

// 使 v-model 必填
const model = defineModel({ required: true })// 提供一个默认值
const model = defineModel({ default: 0 })

WARNING

如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值,会导致父组件与子组件之间不同步。在下面的示例中,父组件的 myRef 是 undefined,而子组件的 model 是 1:

子组件:

js

const model = defineModel({ default: 1 })

父组件:

js

const myRef = ref()

html

<Child v-model="myRef"></Child>

v-model 的参数​

组件上的 v-model 也可以接受一个参数:

template

<MyComponent v-model:title="bookTitle" />

在子组件中,我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数:

vue

<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script><template><input type="text" v-model="title" />
</template>

在演练场中尝试一下

如果需要额外的 prop 选项,应该在 model 名称之后传递:

js

const title = defineModel('title', { required: true })

3.4 之前的用法

 

多个 v-model 绑定​

利用刚才在 v-model 的参数小节中学到的指定参数与事件名的技巧,我们可以在单个组件实例上创建多个 v-model 双向绑定。

组件上的每一个 v-model 都会同步不同的 prop,而无需额外的选项:

template

<UserNamev-model:first-name="first"v-model:last-name="last"
/>

vue

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script><template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

在演练场中尝试一下

3.4 之前的用法

 

处理 v-model 修饰符​

在学习输入绑定时,我们知道了 v-model 有一些内置的修饰符,例如 .trim.number 和 .lazy。在某些场景下,你可能想要一个自定义组件的 v-model 支持自定义的修饰符。

我们来创建一个自定义的修饰符 capitalize,它会自动将 v-model 绑定输入的字符串值第一个字母转为大写:

template

<MyComponent v-model.capitalize="myText" />

通过像这样解构 defineModel() 的返回值,可以在子组件中访问添加到组件 v-model 的修饰符:

vue

<script setup>
const [model, modifiers] = defineModel()console.log(modifiers) // { capitalize: true }
</script><template><input type="text" v-model="model" />
</template>

为了能够基于修饰符选择性地调节值的读取和写入方式,我们可以给 defineModel() 传入 get 和 set 这两个选项。这两个选项在从模型引用中读取或设置值时会接收到当前的值,并且它们都应该返回一个经过处理的新值。下面是一个例子,展示了如何利用 set 选项来应用 capitalize (首字母大写) 修饰符:

vue

<script setup>
const [model, modifiers] = defineModel({set(value) {if (modifiers.capitalize) {return value.charAt(0).toUpperCase() + value.slice(1)}return value}
})
</script><template><input type="text" v-model="model" />
</template>

在演练场中尝试一下

3.4 之前的用法

 

带参数的 v-model 修饰符​

这里是另一个例子,展示了如何在使用多个不同参数的 v-model 时使用修饰符:

template

<UserNamev-model:first-name.capitalize="first"v-model:last-name.uppercase="last"
/>

vue

<script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true }
</script>

3.4 之前的用法vue

<script setup>
const props = defineProps({
firstName: String,
lastName: String,
firstNameModifiers: { default: () => ({}) },
lastNameModifiers: { default: () => ({}) }
})
defineEmits(['update:firstName', 'update:lastName'])console.log(props.firstNameModifiers) // { capitalize: true }
console.log(props.lastNameModifiers) // { uppercase: true }
</script>

在 GitHub 上编辑此页

 前一篇事件下一篇 透传 Attributes

组件 v-model已经加载完毕

相关文章:

《Vue3实战教程》19:Vue3组件 v-model

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 组件 v-model​ 基本用法​ v-model 可以在组件上使用以实现双向绑定。 从 Vue 3.4 开始&#xff0c;推荐的实现方式是使用 defineModel() 宏&#xff1a; vue <!-- Child.vue --> <script setup> co…...

数字PWM直流调速系统设计(论文+源码)

2.1 系统方案设计 2.2.1开环控制方案 采用开环方案的系统架构如图2.1所示&#xff0c;这种方式不需要对直流电机的转速进行检测&#xff0c;在速度控制时单片机只需要直接发出PWM就可以实现直流电机速度的控制。这种方式整体设计难度较低&#xff0c;但是无法准确得知当前的…...

Spring Boot日志处理

文章目录 Spring Boot日志处理1. 日志存入数据库&#xff08;AOP&#xff09;2. 日志控制台打印与写入文件&#xff08;logback&#xff09; Spring Boot日志处理 1. 日志存入数据库&#xff08;AOP&#xff09; 引入aop依赖 <dependency><groupId>org.springfram…...

vue3+Echarts+ts实现甘特图

项目场景&#xff1a; vue3Echartsts实现甘特图;发布任务 代码实现 封装ganttEcharts.vue <template><!-- Echarts 甘特图 --><div ref"progressChart" class"w100 h100"></div> </template> <script lang"ts&qu…...

OpenCV相机标定与3D重建(41)从 3D 物点和它们对应的 2D 图像点估算初始相机内参矩阵函数initCameraMatrix2D()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 从3D-2D点对应关系中找到一个初始的相机内参矩阵。 cv::initCameraMatrix2D 是 OpenCV 库中的一个函数&#xff0c;用于从 3D 物点和它们对应的…...

ELK日志平台搭建 (最新版)

一、安装 JDK 1. 下载 JDK 21 RPM 包 wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.rpm2. 安装 JDK 21,使用 rpm 命令安装下载的 RPM 包&#xff1a; sudo rpm -ivh jdk-21_linux-x64_bin.rpm3. 配置环境变量 编辑 /etc/profile 文件以配置 JAVA_HO…...

智能化人才招聘系统是怎样的?

随着企业规模的扩大和业务范围的拓展&#xff0c;人才招聘成为了企业发展的关键环节。然而&#xff0c;市面上的人才招聘系统琳琅满目&#xff0c;质量参差不齐&#xff0c;许多企业发现&#xff0c;并非所有系统都能满足他们的需求&#xff0c;特别是智能化的需求。今天&#…...

电脑主机后置音频插孔无声?还得Realtek高清晰音频管理器调教

0 缘起 一台联想电脑&#xff0c;使用Windows 10 专业版32位&#xff0c;电脑主机后置音频插孔一直没有声音&#xff0c;所以音箱是接在机箱前面版的前置音频插孔上的。 一天不小心捱到了音箱的音频线&#xff0c;音频线头断在音频插孔里面了&#xff0c;前置音频插孔因此用不…...

记一次音频无输出的解决方案

啊啊啊&#xff0c;刷个抖音就发现个死电脑死都不出声&#xff0c;捣鼓了一天才解决 打开wav文件时&#xff0c;提示错误找不到音频播放设备 0xc00d36fa 起初以为是声卡坏了&#xff0c;就到官网下载、更新了声卡驱动。无用什么驱动精灵也检测了&#xff0c;但也测不出啥来。…...

初学stm32 --- FSMC驱动LCD屏

目录 FSMC简介 FSMC框图介绍 FSMC通信引脚介绍 FSMC_NWE 的作用 FSMC_NWE 的时序关系 FSMC_NOE 的含义 FSMC_NOE 的典型用途 FSMC_NOE 的时序关系 使用FSMC驱动LCD FSMC时序介绍 时序特性中的 OE ILI9341重点时序&#xff1a; FSMC地址映射 HADDR与FSMC_A关系 LCD的…...

Scala_【4】流程控制

第四章 分支控制if-else单分支双分支多分支返回值嵌套分支 For循环控制包含边界不包含边界循环守卫循环步长嵌套循环循环返回值 While循环Break友情链接 分支控制if-else 单分支 双分支 多分支 返回值 嵌套分支 For循环控制 Scala也为for循环这一常见的控制结构提供了非常多的…...

mysql带自动递增列的表删除数据后如何重置递增值

mysql带自动递增列的表删除数据后如何重置递增值 在 MySQL 中&#xff0c;如果你删除了表中的数据&#xff0c;自动递增列的值 不会自动重置。如果你希望在删除数据后重新设置自动递增列的值&#xff0c;可以使用以下几种方法&#xff1a; 1. 使用 ALTER TABLE 重置自动递增值…...

[CTF/网络安全] 攻防世界 simple_php 解题详析

题目描述&#xff1a;小宁听说php是最好的语言,于是她简单学习之后写了几行php代码。 代码解读 $a$_GET[a]; 从HTTP GET请求参数中获取一个名为a的变量&#xff0c;并将其赋值给变量a。符号用于禁止错误输出&#xff0c;如果不存在参数a则会将变量a设置为NULL。 $b$_GET[b];…...

Android 第三方框架:网络框架:OkHttp:源码分析:缓存

文章目录 概述磁盘缓存 类结构 InternalCache接口DiskLruCahce.Entry内部类DiskLruCahce.Snapshot内部类DiskLruCahce.Editor内部类DiskLruCahce类Cahce.Entry内部类Cahce类总结概述 不存在内存缓存,只存在磁盘缓存 磁盘缓存 磁盘缓存 类结构 主要InternalCache接口、Dis…...

大数据新视界 -- Hive 集群搭建与配置的最佳实践(2 - 16 - 13)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

C# 设计模式(结构型模式):组合模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;组合模式 在软件设计中&#xff0c;有时我们需要处理的是一组对象&#xff0c;而这些对象既可以是单独的元素&#xff0c;也可以是由多个子元素组成的复合体。这时&#xff0c;组合模式&#xff08;Composite Patte…...

Aloudata AIR | 逻辑数据平台的 NoETL 之道

一文为你介绍 Aloudata AIR 逻辑数据平台的技术原理与核心价值 本文主旨是介绍逻辑数据平台的技术原理与核心价值&#xff0c;包含几个部分的内容&#xff1a; 首先&#xff0c;简要阐述逻辑数据平台出现的背景&#xff1b;其次&#xff0c;详细讲解逻辑数据平台的构建方法&am…...

js的一些处理

1.翻转字符串 let str abcdef str str.split().reverse().join() console.log(str) 因此想到了我之前写的截取字符串获取参数跳转&#xff0c;在写一遍 let str nameJack&age18&gender男 let list str.split(&); let obj {} list.forEach((v)>{ …...

NLP 复习大纲

CH3 激活函数意义 增强网络表达能力&#xff0c;引入非线性因素 连续可导的非线性函数 尽可能简单 导数的值域要在合适的范围内 为什么会发生梯度消失 误差传播的迭代公式为&#xff1a; 其中需要用到激活函数的导数&#xff0c;而激活函数的导数值小于1时&#xff0c;误差经过…...

Kafka的rebalance机制

1、什么是 rebalance 机制 重平衡&#xff08;rebalance&#xff09;机制规定了如何让消费者组下的所有消费者来分配 topic 中的每一个分区。 2、rebalance 机制的触发条件是什么 &#xff08;1&#xff09;消费者组内成员变更 成员增加&#xff1a;当有新的消费者加入到消费…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...