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

vue3的深入组件-组件 v-model

news 来源：原创 2025/8/13 3:17:10

组件 v-model

基本用法

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

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

<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 绑定一个值：

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app'
const appStore =  useAppStore()
import modelChild from './components/test/modelChild.vue'
const textColor = computed(() => appStore.getTextColor)
appStore.initTheme()
const countModel = ref(10)
</script><template><ConfigGlobal><p :style="{'color':textColor}"  >p标签</p>{{ countModel }}<modelChild v-model="countModel"></modelChild></ConfigGlobal></template>

显示如下：
在这里插入图片描述

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

它的 .value 和父组件的 v-model 的值同步；
当它被子组件变更了，会触发父组件绑定的值一起更新。
这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-model 用法的同时轻松包装原生 input 元素：

child.vue<script setup>
const model = defineModel()
</script><template><span>My input</span> <input v-model="model">
</template>

// app.vue
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'const msg = ref('Hello World!')
</script><template><h1>{{ msg }}</h1><Child v-model="msg" />
</template>

底层机制

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

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

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="emit('update:modelValue', $event.target.value)"/>
</template><!-- Parent.vue -->
<template><ConfigGlobal><p :style="{'color':textColor}"  >p标签</p>{{ foo }}<modelChild :modelValue="foo"@update:modelValue="$event => (foo = $event)"></modelChild></ConfigGlobal></template>

因为 defineModel 声明了一个 prop，你可以通过给 defineModel 传递选项，来声明底层 prop 的选项：
子组件

<script setup>
const model = defineModel({required:true, default: 1 }) // 对应 model 参数
</script><template><input v-model="model" type="text"><!-- <input v-model="age" type="number"> -->
</template>

父组件

<script setup lang="ts">
const countModel = ref()
console.log(countModel.value,'countModel'); // undefined
</script>
<template><ConfigGlobal>{{ countModel }}<modelChild v-model="countModel"></modelChild></ConfigGlobal></template>

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

v-model 的参数

//子组件
<script setup>
const title = defineModel('title')
</script><template><input type="text" v-model="title" />
</template>// 父组件
<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'const bookTitle = ref('v-model argument example')
</script><template><h1>{{ bookTitle }}</h1><MyComponent v-model:title="bookTitle" />
</template>

不同属性绑定多个 v-model

父组件

<UserForm v-model:username="user.name"v-model:age="user.age"
/>

子组件

<script setup>
const username = defineModel('username') // 对应 username 参数
const age = defineModel('age') // 对应 age 参数
</script><template><input v-model="username" type="text"><input v-model="age" type="number">
</template>

处理 v-model 修饰符

父组件
使用内置修饰符（如 .trim）：

<Child v-model.trim="text" />

子组件

<script setup>
const [model, modifiers] = defineModel() // 解构出修饰符// 根据修饰符调整值
const processedModel = computed({get: () => model.value,set: (value) => {if (modifiers.trim) {model.value = value.trim()} else {model.value = value}}
})
</script><template><input v-model="processedModel" />
</template>

使用自定义修饰符 .capitalize：
创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写

父组件

<Child v-model.capitalize="text" />

子组件
通过 set 选项处理修饰符逻辑

<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>

带参数的 v-model 修饰符

父组件

<UserForm v-model:username.trim="user.name"v-model:age.number="user.age"
/>

子组件
分别处理每个参数的修饰符：

<script setup>
const [username, usernameModifiers] = defineModel('username')
const [age, ageModifiers] = defineModel('age')// 处理 username 的 trim 修饰符
const processedUsername = computed({get: () => username.value,set: (val) => {username.value = usernameModifiers.trim ? val.trim() : val}
})// 处理 age 的 number 修饰符
const processedAge = computed({get: () => age.value,set: (val) => {age.value = ageModifiers.number ? Number(val) : val}
})
</script><template><input v-model="processedUsername" /><input v-model="processedAge" type="number" />
</template>

vue3的深入组件-组件 v-model

组件 v-model 基本用法 v-model 可以在组件上使用以实现双向绑定。从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏： <script setup> const model defineModel()function update() {model.value } </script><template>…...

编程日记 2025/8/13 3:17:10

【Dv3Admin】Git 子模块在 Dv3admin 插件项目统一管理实践

在 Dv3admin 框架中，plugins 目录下存放的都是基于 Git 的独立插件项目。为了实现多个插件的统一管理与更新，我们推荐使用 Git 的子模块（submodule）功能。通过子模块的方式，将多个 Git 仓库嵌套管理，可以简…...

编程日记 2025/8/13 3:12:32

什么是死信队列？死信队列是如何导致的？

死信交换机（Dead Letter Exchange，DLX） 定义：死信交换机是一种特殊的交换机，专门用于**接收从其他队列中因特定原因变成死信的消息**。它的本质还是交换机，遵循RabbitMQ中交换机的基本工作原理&#xff0c…...

编程日记 2025/8/13 3:15:34

计算机网络：深入分析三层交换机硬件转发表生成过程

三层交换机的MAC地址转发表生成过程结合了二层交换和三层路由的特性，具体可分为以下步骤：一、二层MAC地址表学习（基础转发层）初始状态交换机启动时，MAC地址表为空，处于学习阶段。数据帧接收与源MAC学习当主机A发送数据帧到主机B时，交换机会检查数据帧的源MAC地址。…...

编程日记 2025/8/8 4:59:52

使用docker进行环境部署和启动 docker pull minio/miniodocker run -d -p 9000:9000 -p 9001:9001 \-e "MINIO_ROOT_USERminio" \-e "MINIO_ROOT_PASSWORDminio123" \-v /opt/minio/data:/data \-v /opt/minio/config:/root/.minio \minio/minio server --…...

编程日记 2025/8/8 4:59:50

使用Jmeter进行核心API压力测试

最近公司有发布会，需要对全链路比较核心的API的进行压测，今天正好分享下压测软件Jmeter的使用。一、什么是Jmeter? JMeter 是 Apache 旗下的基于 Java 的开源性能测试工具。最初被设计用于 Web 应用测试，现已扩展到可测试多种不同的应用程…...

编程日记 2025/8/8 4:59:49

嵌入式学习笔记 - LCD

一显示器接口种类： 下图中间左边一个为不带MCU的RGB屏，中间右边一个为带MCU的MCU屏带控制器的LCD屏幕跟STM32单片机的交互方式，可以为串口，也可以为SPI，或者8080，通过命令的方式对液晶控制器芯片进行操作…...

编程日记 2025/8/8 4:59:47

聊聊Spring AI Alibaba的SentenceSplitter

序本文主要研究一下Spring AI Alibaba的SentenceSplitter SentenceSplitter spring-ai-alibaba-core/src/main/java/com/alibaba/cloud/ai/transformer/splitter/SentenceSplitter.java public class SentenceSplitter extends TextSplitter {private final EncodingRegis…...

编程日记 2025/8/8 3:36:38

Python 异常处理与文件 IO 操作：构建健壮的数据处理体系（3/10）

摘要：在 Python 开发中，异常处理和文件 IO 操作是构建稳定程序的基石。本文将深入探讨异常捕获机制、上下文管理器原理，并结合 JSON/CSV 数据持久化与实战项目，帮助你掌握应对复杂场景的核心技术。本文深入探讨了 Python 编程中的…...

编程日记 2025/8/13 3:13:53

Python中，正则表达式，

目录 1.基本匹配2.量词3.边界匹配4.选择和逻辑5.示例代码在Python中，正则表达式（Regular Expressions，简称regex）是一种强大的文本处理工具，用于匹配、查找和替换字符串中的模式。Python通过 re模块提供正则表达式支…...

编程日记 2025/8/13 3:15:34

CSS：元素显示模式与背景

元素显示模式元素显示模式是指元素在浏览器页面中显示的模式，比如<div></div>是独占一行的块级元素，<span></span>是行内元素元素显示模式分为三大类： 块级元素行内元素行内块元素块级元素 block 常见的块级…...

编程日记 2025/8/8 7:37:56

Java游戏服务器开发流水账(2)开发中Maven的管理

Maven 是一款流行的 Java 项目管理工具，它基于项目对象模型（Project Object Model，POM）的概念来管理项目的构建、依赖和文档等。游戏服务器开发中也会使用. 项目构建生命周期管理：Maven 定义了一套清晰的项目构建生…...

编程日记 2025/8/8 7:37:54

学习设计模式《八》——原型模式

一、基础概念原型模式的本质是【克隆生成对象】； 原型模式的定义：用原型实例指定创建对象的种类，并通过拷贝这些原型创建新的对象。原型模式的功能： 1、通过克隆来创建新的对象实例； 2、为克隆出来的新对象实例复制…...

编程日记 2025/8/13 3:15:35

【MySQL】存储引擎 - MEMORY详解

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/8/8 7:37:50

正则表达式实用指南：原理、场景、优化与引擎对比

正则表达式实用指南：原理、场景、优化与引擎对比正则表达式（Regular Expression，简称 regex 或 regexp）是程序员处理文本数据时不可或缺的“瑞士军刀”。无论是表单校验、日志分析、数据清洗，还是敏感信息脱敏&#…...

编程日记 2025/8/7 7:44:08

Python3正则表达式：字符串魔法师的指南[特殊字符]‍♂️

Python3正则表达式什么是正则表达式？在Python中使用正则表达式一、正则表达式基础语法：你的魔法咒语基本匹配符字符类：性格各异的字符们预定义字符类：常见角色的快捷方式重复限定符：贪婪的收集者贪婪vs非贪婪&#xf…...

编程日记 2025/8/8 7:37:45

k8s术语之CronJob

CronJob管理基于时间的Job，即： 在给定时间点只运行一次周期性地在给定时间点运行一个CronJob对象类似于crontab文件中的一行。它根据指定的预定计划周期地运行一个Job,格式可以参考Cron 前提条件当前使用地Kubernetes集群，版本>1.8.对…...

编程日记 2025/8/13 3:15:05

常见的提示词攻击方法和防御手段——提示词注入（Prompt Injection）攻击解析

提示词注入（Prompt Injection）攻击解析提示词注入是一种针对大型语言模型（LLM）的新型攻击手段，攻击者通过精心设计的输入文本（提示词）操控AI模型的输出，使其执行非预期行为或泄露敏…...

编程日记 2025/8/8 7:37:41

软件逆向工程核心技术：脱壳原理与实战分析

目录一、脱壳技术概述：从保护到还原的逆向之旅 1.1 脱壳技术的本质与核心价值 1.2 壳的分类与核心技术解析 1.3 学习路径：从压缩壳到加密壳的渐进式突破二、脱壳三步法：系统化逆向工程框架 2.1 核心流程总览 2.2 实战案例&#xff1…...

编程日记 2025/8/13 3:15:06

C27-简单选择排序法

一基本思想每轮从待排序序列中选出最小或最大的元素,与待排序区间起始位置交换,逐步缩小待排序区间二算法实现遍历数组:设数组长度为n,外层循环i从0到n-2(共n-1轮) 找最小值下标:内层循环j从i1到n-1,遍历待排序区间(i到n-1),记录找最小值下标min 交换元素:将arr[i]与a…...

编程日记 2025/8/8 7:37:37

【Redis】持久化与事务

文章目录 1. 持久化1.1 RDB(定期)1.1.1 触发方式1.1.2 触发流程 1.2. AOF(实时)1.2.1 设置AOF1.2.2 刷新策略1.2.3 重写机制 2. 事务2.1 redis事务概念2.2 事务操作 Mysql有几个特性： 原子性一致性隔离性，redis是串行的，自带隔离性持久性&…...

编程日记 2025/8/8 7:37:35

Web 自动化之 HTML JavaScript 详解

文章目录一、HTML 常用标签二、javascript 脚本1、什么是 javascript(js)2、 js变量和函数3、js 弹窗处理4、js 流程控制语句和 switch 结构语句应用一、HTML 常用标签 HTML：超文本标记语言超文本：不仅只包含文字，还有超链接、视频…这些…...

编程日记 2025/8/8 7:37:32

【JavaScript】二十九、垃圾回收 + 闭包 + 变量提升

文章目录 1、作用域1.1 局部作用域1.2 全局作用域1.3 作用域链 2、JC垃圾回收机制♻️3、GC算法3.1 引用计数法3.2 标记清除法 4、闭包4.1 定义4.2 闭包的应用：实现数据的私有 5、变量提升 1、作用域即一个范围，离开了这个范围，这个变量就不…...

编程日记 2025/8/13 3:15:07

Python在自动驾驶实时数据处理中的应用：让AI驾驶更智能、更高效

Python在自动驾驶实时数据处理中的应用：让AI驾驶更智能、更高效近年来，自动驾驶技术的飞速发展离不开人工智能和数据处理的支撑，而Python作为AI与数据分析的核心编程语言，在自动驾驶实时数据处理方面扮演着不可或缺的角色。从传感器数据解析，到路径规划与决策优化，再到…...

编程日记 2025/8/13 3:13:52

功能安全的关键——MCU锁步核技术全解析（含真实应用方案）

随着智能汽车的发展，整车对功能安全的要求越来越高。特别是像电动助力转向（EPS）、制动控制系统、气囊控制器这类对“出错零容忍”的系统，已经广泛采用一种重要的安全架构——锁步核（Lockstep Core）。今天我…...

编程日记 2025/8/13 3:15:33

Java实现桶排序算法

1. 桶排序原理图解桶排序是一种基于分桶思想的非比较排序算法，适用于数据分布较为均匀的场景。其核心思想是将数据分散到有限数量的“桶”中，每个桶再分别进行排序（通常使用插入排序或其他简单的排序算法）。以下是桶排序的步骤&a…...

编程日记 2025/8/13 3:12:33

剖析 FFmpeg：从基本功能到过滤器，实现音视频处理的灵活性

目录 1.解复用2 解码2.1 音频解码2.2 视频解码 3 修饰3.1 avio3.2 重采样 4 过滤器4.1 过滤器基本知识4.2 简单过滤器4.3 复杂滤镜图 1.解复用解复用就是把容器中的媒体流分离出来，方便我们对媒体流处理。 step1：对媒体文件上下文初始化 AVFormatCont…...

编程日记 2025/8/8 7:37:21

maven如何搭建自己的私服(LINUX版)？

环境准备安装 JDK ：确保系统已安装 JDK 8 或更高版本。可以通过以下命令安装 JDK： 安装 OpenJDK ：sudo apt update && sudo apt install openjdk-11-jdk 安装 Oracle JDK ：需要添加第三方仓库，例如 WebUpd8 …...

编程日记 2025/8/8 7:37:19

机器视觉的手机FPC油墨丝印应用

在现代智能手机制造过程中，精密的组件装配和质量控制是确保产品性能和用户体验的关键。其中，柔性印刷电路板（FPC）的油墨丝印工艺尤为关键，它不仅影响到电路板的美观，更直接关系到电路的导电性能和可靠性。而…...

编程日记 2025/8/8 7:37:17

AI原生手机：三大技术阵营的终极对决与未来展望

引言：AI手机时代的真正到来 2024年，智能手机行业迎来了一个历史性转折点——AI原生手机从概念走向主流。根据IDC最新报告，中国AI手机出货量同比激增591%，渗透率从2023年的3%飙升至22%。这一数据背后，是手机厂商在硬件…...

编程日记 2025/8/13 3:13:53

CFCA受邀参加盛京银行手机银行7.0发布会

4月30日，盛京银行举办手机银行7.0发布会。盛京银行手机银行7.0围绕“慧享生活，财富随行”主题，聚焦便捷体验、财富管理、惠民生活，构建12大类服务，升级142项功能，全新设置信用卡频道，推出“云…...

编程日记 2025/8/13 3:13:53

IT/OT 融合架构下的工业控制系统安全攻防实战研究

1. 引言随着工业 4.0 和智能制造的浪潮席卷全球，信息技术 (IT) 与运营技术 (OT) 的融合已成为不可逆转的趋势。这种融合旨在通过实时数据交换和分析，打破传统的信息孤岛，显著提升生产效率、优化决策、降低运营成本并增强市场竞争力。IT 系统…...

编程日记 2025/8/8 7:37:09

AI优化高频PCB信号完整性：猎板PCB的技术突破与应用实践

随着5G通信、AI服务器及新能源汽车的快速发展，高频PCB的信号完整性已成为决定电子产品性能的关键。本文以猎板PCB的技术实践为例，解析如何通过AI算法与精密制造工艺的结合，实现高频信号传输的极致优化，为行业提供高可靠性的解决方…...

编程日记 2025/8/13 3:15:07

【Bluedroid】蓝牙 SDP（服务发现协议）模块代码解析与流程梳理

本文深入剖析Bluedroid蓝牙协议栈中 SDP（服务发现协议）服务记录的全生命周期管理流程，涵盖初始化、记录创建、服务搜索、记录删除等核心环节。通过解析代码逻辑与数据结构，揭示各模块间的协作机制，包括线程安全设计、回…...

编程日记 2025/8/8 7:37:06

obj = null；赋值null之前没有其他引用指向obj对象，那么，当obj=null时，会被垃圾回收机制立即回收吗？

不会立即回收。具体原因是： 赋值 obj null; 后，对象变成“不可达”，符合垃圾回收条件，但垃圾回收器并不会立刻回收它。垃圾回收是CLR自动控制的非确定性过程，什么时候执行回收取决于系统内存压力、GC策略、分代情况…...

编程日记 2025/8/10 10:55:49

Android 数据持久化之文件存储

在 Android 开发中，存储文件是一个常见的需求。本文中介绍 openFileOutput 和 File 两种不同的方式来操作文件。一、File 方式根据文件的存储位置和访问权限，可以将文件存储分为内部存储（Internal Storage）和外部存储&#x…...

编程日记 2025/8/8 7:37:02

差分OPA verilogaA 模型

做电路设计，需要提前用理想模型如VerilogA模型做验证。这里分享一个由ahdlib库里单端opamp改造而来的差分opamp。参考何乐年的《模拟集成电路设计与仿真》10.4节423页； 描述的小信号模型如上。 VerilogA 用到了SRI/C，GBWgm/C,gaingm*r1等概念…...

编程日记 2025/8/8 7:37:00

oracle goldengate非并行进程转换为并行进程

oracle goldengate非并行进程转换为并行进程在上一期的文章中写道了直接创建并行进程的方式对大事务进行分解，这对于新建立同步进程的时候提前规划是很有帮助的，但是如果对已经进行了同步的进程重新建立需要耗时比较长，Oracle提供了非并行进…...

编程日记 2025/8/8 7:36:58

58.[前端开发-前端工程化]Day05-webpack-Git安装-配置-Git命令

Git版本控制工具详解 1 邂逅版本控制工具认识版本控制（版本控制） 版本控制的功能版本控制的历史 2 集中式和分布式区别集中式版本控制分布式版本控制 3 Git的环境安装搭建 Git的安装 Bash – CMD – GUI 区别 Git的配置分类 Git的配置选项 Git的…...

编程日记 2025/8/8 7:36:56

CF每日5题

每日刷题两小时颐养天年 1855A 800 思维将不高兴的同学计数cnt 不高兴的同学之间两两交换，一定不会在 p i i p_ii pii的位置上，贡献是cnt/2 如果cnt%2>0，那就多交换一次 void solve() {int n;cin>>n;int cnt0;forr(i,1,n){in…...

编程日记 2025/8/8 7:36:53

Redis实现分布式获取全局唯一自增ID的案例。

【1】简易自增版本(从 1 开始 1,2,3，...) 项目结构下面是一个基于 RedisTemplate 实现的分布式全局唯一自增 ID 生成器的案例。适用于 Java Spring Boot 环境，利用 Redis 的原子操作 INCR 指令。 ✅ 原理说明 Redis 提供的 INCR 命令是原子性的&…...

编程日记 2025/8/8 7:36:51

创建型模式：工厂方法（Factory Method）模式

一、简介工厂方法（Factory Method）模式是一种创建型设计模式，它定义了一个创建对象的接口，但让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。在 C# 中，工厂方法模式提供了一种更灵活的对象创建方式，将对象的创建和使用分离，提高了代码的可维护性和…...

编程日记 2025/8/8 7:36:49

大型语言模型在网络安全领域的应用综述

大型语言模型在网络安全领域的应用综述简介1. 引言1.1 背景与意义1.2 LLMs 的基本概念1.3 LLMs 在网络安全中的优势1.4 报告目标 2. 文献综述方法2.1 研究问题2.2 文献检索策略2.3 文献筛选标准 3. LLMs 在网络安全领域的应用3.1 软件和系统安全 (Software and System Securit…...

编程日记 2025/8/8 9:42:47

TDEngine 与 Grafana

目录实践目录 Grafana 参考文档实践目录 10.60.100.194：/home/dualven/tdengine Grafana systemctl status grafana-server http://10.60.100.194:3000/ 这个端口与mydoor的new server服务冲突 （同时只开一个） 参考文档运行监…...

编程日记 2025/8/8 6:12:47

iPhone手机连接WiFi异常解决方法

iPhone手机连接WiFi异常解决方法一、问题现象二、iPhone连不上可能的原因三、基础排查与快速修复第一步：重启大法第二步：忽略网络，重新认证第三步：关闭“私有无线局域网地址”第四步：修改DNS服务器第五步：还原网络设置四、路由器端排查及设置关闭MAC地址过滤或添加到白名…...

编程日记 2025/8/8 9:42:45

微服务不注册到nacos的方法

引言:在开发中,有时候多个开发一起开发,可能会同时注册到dev环境中,这样可能会影响dev环境,那么在idea添加2个参数即可解决 spring.cloud.nacos.discovery.register-enabled falsespring.cloud.nacos.discovery.enabled false...

编程日记 2025/8/8 4:59:45

Spring Boot + Vue 实现在线视频教育平台

一、项目技术选型前端技术： HTML CSS JavaScript Vue.js 前端框架后端技术： Spring Boot 轻量级后端框架 MyBatis 持久层框架数据库： MySQL 5.x / 8.0 开发环境： IDE：Eclipse / IntelliJ IDEA JDK&…...

编程日记 2025/8/8 9:42:43

【嵌入式开发-SPI】

嵌入式开发-SPI ■ SPI简介■ SPI （Standard SPI）■ DSPI （Dual SPI）■ QSPI是 Queued SPI的简写 ■ SPI简介 SPI协议其实是包括：Standard SPI、Dual SPI和Queued SPI三种协议接口，分别对应3-wire, 4-wire…...

编程日记 2025/8/8 9:42:41