vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定
1. 基础用法
在 Vue3 中，v-model 在组件上的使用有了更灵活的方式。默认情况下，v-model 使用 modelValue 作为 prop，update:modelValue 作为事件。
1.1 基本示例
<!-- CustomInput.vue -->
<template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template><script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script><!-- 父组件使用 -->
<template><CustomInput v-model="searchText" />
</template><script setup>
import { ref } from 'vue'
const searchText = ref('')
</script>
1.2 使用 computed 实现双向绑定
<!-- CustomInput.vue -->
<template><input v-model="inputValue" />
</template><script setup>
import { computed } from 'vue'const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])// 使用计算属性实现双向绑定
const inputValue = computed({get() {return props.modelValue},set(value) {emit('update:modelValue', value)}
})
</script>
2. 自定义 v-model 名称
Vue3 允许我们在同一个组件上使用多个 v-model，每个 v-model 可以有自己的名称。
2.1 单个自定义名称
<!-- CustomField.vue -->
<template><input:value="title"@input="$emit('update:title', $event.target.value)"/>
</template><script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script><!-- 父组件使用 -->
<template><CustomField v-model:title="articleTitle" />
</template><script setup>
import { ref } from 'vue'
const articleTitle = ref('默认标题')
</script>
2.2 多个 v-model 绑定
<!-- UserForm.vue -->
<template><div class="form"><input:value="firstName"@input="$emit('update:firstName', $event.target.value)"/><input:value="lastName"@input="$emit('update:lastName', $event.target.value)"/></div>
</template><script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script><!-- 父组件使用 -->
<template><UserFormv-model:firstName="user.firstName"v-model:lastName="user.lastName"/>
</template><script setup>
import { reactive } from 'vue'const user = reactive({firstName: 'John',lastName: 'Doe'
})
</script>
3. v-model 修饰符
3.1 内置修饰符
<!-- CustomInput.vue -->
<template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template><script setup>
defineProps({modelValue: String,modelModifiers: { default: () => ({}) }
})
</script><!-- 父组件使用 -->
<template><CustomInput v-model.trim="text" />
</template>
3.2 自定义修饰符
<!-- CustomInput.vue -->
<template><input:value="modelValue"@input="handleInput"/>
</template><script setup>
const props = defineProps({modelValue: String,modelModifiers: { default: () => ({}) }
})const emit = defineEmits(['update:modelValue'])const handleInput = (event) => {let value = event.target.value// 检查是否应用了 capitalize 修饰符if (props.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)}emit('update:modelValue', value)
}
</script><!-- 父组件使用 -->
<template><CustomInput v-model.capitalize="text" />
</template>
4. 实际应用示例
4.1 自定义数字输入组件
<!-- NumberInput.vue -->
<template><div class="number-input"><button @click="decrease">-</button><inputtype="number":value="modelValue"@input="handleInput":step="step"/><button @click="increase">+</button></div>
</template><script setup>
const props = defineProps({modelValue: {type: Number,required: true},step: {type: Number,default: 1},min: {type: Number,default: -Infinity},max: {type: Number,default: Infinity}
})const emit = defineEmits(['update:modelValue'])const handleInput = (event) => {const value = Number(event.target.value)if (isValidValue(value)) {emit('update:modelValue', value)}
}const increase = () => {const newValue = props.modelValue + props.stepif (isValidValue(newValue)) {emit('update:modelValue', newValue)}
}const decrease = () => {const newValue = props.modelValue - props.stepif (isValidValue(newValue)) {emit('update:modelValue', newValue)}
}const isValidValue = (value) => {return value >= props.min && value <= props.max
}
</script><!-- 父组件使用 -->
<template><NumberInputv-model="quantity":step="1":min="0":max="100"/>
</template><script setup>
import { ref } from 'vue'
const quantity = ref(1)
</script>
4.2 颜色选择器组件
<!-- ColorPicker.vue -->
<template><div class="color-picker"><divclass="color-preview":style="{ backgroundColor: modelValue }"></div><inputtype="color":value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/><inputtype="text":value="modelValue"@input="handleInput"placeholder="#000000"/></div>
</template><script setup>
const props = defineProps({modelValue: {type: String,default: '#000000'}
})const emit = defineEmits(['update:modelValue'])const handleInput = (event) => {const value = event.target.value// 验证是否为有效的颜色值if (/^#[0-9A-Fa-f]{6}$/.test(value)) {emit('update:modelValue', value)}
}
</script><!-- 父组件使用 -->
<template><ColorPicker v-model="themeColor" />
</template><script setup>
import { ref } from 'vue'
const themeColor = ref('#42b883')
</script>
5. 最佳实践
-
命名规范
- 使用语义化的 prop 名称
- 保持事件名称与 prop 名称的一致性
- 使用
update:前缀作为事件名称
-
类型检查
- 为 props 定义明确的类型
- 在必要时添加自定义验证
- 处理无效输入
-
值的验证
- 在更新值之前进行验证
- 提供适当的错误反馈
- 实现合理的默认值处理
-
性能优化
- 避免不必要的值更新
- 使用计算属性优化复杂逻辑
- 合理使用防抖和节流
相关文章：
vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定
1. 基础用法 在 Vue3 中，v-model 在组件上的使用有了更灵活的方式。默认情况下，v-model 使用 modelValue 作为 prop，update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…...
【win11】解决msrdc.exe窗口启动导致周期性失去焦点
msrdc.exe randomly stealing focus 最近写代码时，经常出现周期性失去焦点的情况非常恼人,不确定是否是Q4的微软更新引起？换了输入法也不行，只能借助工具来查看：大神的工具非常好： 可以发现是remote app 启动了一个UI…...
【2024年终总结】深圳工作生活评测
距离上次写年终总结已经过了一年半了，这一年半中哪怕经历了很多的事情，但是感觉又没发生什么。想写一些骚话，却总觉得自己无法完全表达，便也就这样，静静地记录下这一段时光。 现在是2025年，春节前的时光&am…...
【29】Word：李楠-学术期刊❗
目录 题目 NO1.2.3.4.5 NO6.7.8 NO9.10.11 NO12.13.14.15 NO16 题目 NO1.2.3.4.5 另存为手动/F12Fn光标来到开头位置处→插入→封面→选择花丝→根据样例图片，对应位置填入对应文字 (手动调整即可）复制样式：开始→样式对话框→管理…...
npm常用命令
以往nodejs版本 Node.js — Node.js 版本 CNPM Binaries Mirror 查看当前版本 npm -v 查看node安装在哪里 where node 清除缓存 npm cache clean --force 淘宝镜像（只支持下载，不支持上传发布） npm config set registry https://reg…...
安装最小化的CentOS7后，执行yum命令报错Could not resolve host mirrorlist.centos.org； 未知的错误
文章目录 安装最小化的CentOS7后，执行yum命令报错"Could not resolve host: mirrorlist.centos.org; 未知的错误"错误解决方案： 安装最小化的CentOS7后，执行yum命令报错"Could not resolve host: mirrorlist.centos.org; 未知…...
现代 JavaScript 的入门教程
现代 JavaScript 的定义 现代 JavaScript 通常指的是自 ECMAScript 2015（也称为 ES6）以来的一系列语言更新和改进，以及随之而来的开发工具、库和框架的生态系统。这些变化不仅增强了 JavaScript 的功能性和表达能力，还推动了更高…...
linux naive代理设置
naive linux客户端 Release v132.0.6834.79-2 klzgrad/naiveproxy GitHub Client setup Run ./naive with the following config.json to get a SOCKS5 proxy at local port 1080. {"listen": "socks://127.0.0.1:1080","proxy": "htt…...
))
Java数据结构 (链表反转（LinkedList----Leetcode206))
1. 链表的当前结构 每个方框代表一个节点，每个节点包含两个部分： 左侧的数字：节点存储的值，例如 45、34 等。右侧的地址（如 0x90）：表示该节点 next 指针指向的下一个节点的内存地址。 例子中&a…...
游戏与硬件深度协同，打造更精细的体验优化
高画质的游戏往往带来手机的发热和卡顿从而影响游戏体验。开发者希望能够获取到手机运行的实时状态，从而能够进行主动的负载调节，将手机发热时游戏体验影响降到最低；同时手机也可以通过游戏传入的关键场景如"正在下载资源"“团战中…...
)
C++实现设计模式---命令模式 (Command)
命令模式 (Command) 命令模式 是一种行为型设计模式，它将请求封装为一个对象，从而使得可以用不同的请求对客户端进行参数化、对请求排队或记录日志，以及支持可撤销的操作。 意图 将操作的调用者与接收者分离，通过将请求封装为独…...
office 2019 关闭word窗口后卡死未响应
最近关闭word文件总是出现卡死未响应的状态，必须从任务管理器才能杀掉word 进程，然后重新打开word再保存，很是麻烦。（#其他特征，在word中打字会特别变慢，敲击键盘半秒才出现字符。） office官网…...
flutter入门系列教程＜三＞：tabbar的高度自适用，支持无限滚动
背景 在之前的文章中，简介了tabbar组件的使用，它通常用于顶部放置tabbar标签页头，内容全部都是TabbarView的全部内容，且内容通常是占满屏幕的（尽可能大），如下： 但是有时候我们需要…...
前端三件套详解之 HTML
HTML： 师承b站pink老师【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)css3移动端前端视频教程】 HTML概述 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创…...
【pytorch 】miniconda python3.11 环境安装pytorch
ubuntu24.04 miniconda python3.11 环境安装pytorch 组件：langgraph本身不需要有一些模型是需要的：python3.11环境：报错ModuleNotFoundError: No module named ‘torchaudio’ ModuleNotFoundError: No module named ‘torchaudio’File "/root/miniconda3/envs/05_ep_…...
支持大功率输出高速频闪的图像处理用光源控制器
机器视觉系统中的光源控制器在确保图像质量、提高系统稳定性、降低能耗以及方便系统扩展和升级等方面发挥着重要作用。它可提供稳定光源，调节参数，另外具有操作便捷性。 下面我们来看Gardasoft的光源控制器，Gardasoft拥有作为图像处理用LED光…...
使用 Python 和 Tesseract 实现验证码识别
验证码识别是一个常见且实用的技术需求，尤其是在自动化测试和数据采集场景中。通过开源 OCR（Optical Character Recognition，光学字符识别）工具 Tesseract，结合 Python 的强大生态，我们可以高效实现验证码识…...
Opencv学习
Long time no see!哈哈，假期终于有时间做一点自己喜欢的东西了 还是想说，每天花一点时间投在自己喜欢的事情上，或者专攻一些平时不学的方向，真的很酷！ 图片绘制 对于图像绘制，可以分为：图像创…...
数学大模型MAmmoTH：通过混合说明调整建立数学通才模型
向悦和陈文虎是该项目的主要作者。他们这个项目推出 MAmmoTH，这是一系列专为解决一般数学问题而定制的开源大型语言模型 (LLM)。 MAmmoTH 模型在 MathInstruct 上进行训练，MathInstruct 是我们精心策划的指令调整数据集。 MathInstruct 已编译 来自 13 个…...
springboot 配置多数据源以及动态切换数据源
场景 我们springboot项目，通常会有多个数据库，例如mysql,vertica,postgresql等等数据库，通常我们需要动态切换使用我们想要的数据库，这时候就需要配置多数据源了 多数据源特性 支持多数据库类型：例如，同…...
计算机图形学：实验三 光照与阴影
一、程序功能设计 设置了一个3D渲染场景，支持通过键盘和鼠标控制交互，能够动态调整光源位置、物体材质参数等，具有光照、阴影和材质效果的场景渲染。 OpenGL物体渲染和设置 创建3D物体：代码中通过 openGLObject 结构体表示一个…...
idea修改模块名导致程序编译出错
本文简单描述分别用Idea菜单、pom.xml文件管理项目模块module 踩过的坑： 通过idea菜单创建模块，并用idea菜单修改模块名，结构程序编译报错，出错的代码莫名奇妙。双击maven弹窗clean时，还是报错。因为模块是新建的&am…...
Arcgis国产化替代：Bigemap Pro正式发布
在数字化时代，数据如同新时代的石油，蕴含着巨大的价值。从商业决策到科研探索，从城市规划到环境监测，海量数据的高效处理、精准分析与直观可视化，已成为各行业突破发展瓶颈、实现转型升级的关键所在。历经十年精心打磨…...
RNN实现阿尔茨海默症的诊断识别
本文为为🔗365天深度学习训练营内部文章 原作者：K同学啊 一 导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…...
- Hive和YARN)
大数据学习(36)- Hive和YARN
&&大数据学习&& 🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一下博主哦ᾑ…...
【以音频软件FFmpeg为例】通过Python脚本将软件路径添加到Windows系统环境变量中的实现与原理分析
在Windows系统中，你可以通过修改环境变量 PATH 来使得 ffmpeg.exe 可在任意路径下直接使用。要通过Python修改环境变量并立即生效，如图： 你可以使用以下代码： import os import winreg as reg# ffmpeg.exe的路径 ffmpeg_path …...
计算机的错误计算（二百二十一）
摘要 利用一个数学解题器化简计算 实验表明，即使是数学解题器，也是一派胡言。 有一读者来信，询问数学大模型的推理事宜。现就前面的案例继续做一讨论。 例1. 化简计算摘要中算式。 下面是与一个数学解题器的对话。 点评： &am…...
小利特惠源码/生活缴费/电话费/油卡燃气/等充值业务类源码附带承兑系统
全新首发小利特惠/生活缴费/电话费/油卡燃气/等充值业务类源码附带U商承兑系统 安装教程如下 图片：...
外部flash烧写算法学习笔记（一）
一，STM32CubeProgrammer STM32下载编程工具 | STM32CubeProg介绍、下载、安装和使用教程 - 知乎 1.使用速览 2.外部烧写 二，QSPI外部烧写算法制作 STM32H7的花式玩转SPI Flash章节也更新了，含MDK下载算法制作和STM32CubeProg下载算法制作 …...
嵌入式MCU面试笔记2
目录 串口通信 概论 原理 配置 HAL库代码 1. 初始化函数 2. 数据发送和接收函数 3. 中断和DMA函数 4. 中断服务函数 串口通信 概论 我们知道，通信桥接了两个设备之间的交流。一个经典的例子就是使用串口通信交换上位机和单片机之间的数据。 比较常见的串…...
差分轮算法－两个轮子计算速度的方法-阿克曼四轮小车计算方法
四轮驱小车的话： 转向角度计算方法：float turning_angle z_angular / x_linear; // 转向角度，单位为弧度 速度的话直接用线速度 两轮驱动小车： 计算公式： leftSpeed x_linear - z_angular * ORIGINBOT_WHEEL_TRACK /…...
解释器模式
在软件开发的诸多场景中，我们有时需要处理特定领域的语言或表达式。例如，在数据库查询中，我们使用 SQL 语句来查询数据；在数学计算软件里，需要解析和计算各种数学表达式。解释器模式（Interpreter Pattern&a…...
|（链表篇）02.07. 链表相交（疑点）)
代码随想录刷题day14(2)|（链表篇）02.07. 链表相交（疑点）
目录 一、链表理论基础 二、链表相交求解思路 三、相关算法题目 四、疑点 一、链表理论基础 代码随想录 二、链表相交求解思路 链表相交时，是结点的位置，也就是指针相同，不是结点的数值相同； 思路：定义两个指针…...
戴尔电脑用u盘重装系统_戴尔电脑用u盘重装win10系统教程
戴尔电脑用u盘重装系统？戴尔电脑这几年默认预装win10家庭版和win11家庭版。有的用户用上了预装win11家庭版的戴尔电脑，使用一段时间依然不习惯，于是想退回win10。但不知道怎么重装win10，这几年的戴尔电脑建议采用U盘方式安装系统比…...
http的请求体各项解析
一、前言 做Java开发的人员都知道，其实我们很多时候不单单在写Java程序。做的各种各样的系统，不管是PC的 还是移动端的，还是为别的系统提供接口。其实都离不开http协议或者https 这些东西。Java作为编程语言，再做业务开发时&#…...
【MARK】Cline配合FreeAPI，再薅亿点点token
说明 自从用了cline，token消耗的速度就开始起飞。各家免费的几百万Token，看起来挺多，实际用起来还是顶不住几天~ FreeAPI是个简单的替代，上下文长度还是不如官方API，所以还是推荐使用官方，这个只是玩具&a…...
如何使用CRM数据分析优化销售和客户关系？
嘿，大家好！你有没有想过为什么有些公司在市场上如鱼得水，而另一些却在苦苦挣扎？答案可能就藏在他们的销售策略和客户关系管理（CRM）系统里。今天我们要聊的就是如何通过有效的 CRM 数据分析来提升你的销售额…...
c语言数组详解
前言 一、数组的定义： 二、数组的初始化： 1.如何给数组赋初值： 1.1逐个赋值： 1.2使用花括号初始化： 1.3使用等号赋值： 2.不同的初始化方式 2.1使用循环初始化： 2.2使用默认初始化： 三…...
EasyNVR免费版已发布！EasyNVR接入海康NVR大华NVR宇视NVR天地伟业NVR接入各种IPC摄像机工业监控家庭监控
EasyNVR不用多说了，驰名已久！之前一直是收费的，不管多少个摄像机接入都是收费的，这就导致，很多个人用户，或者说是家庭用户，家里就那么两三个摄像机，想通过EasyNVR接入NAS系统&#x…...
GSI快速收录服务：让你的网站内容“上架”谷歌
辛苦制作的内容无法被谷歌抓取和展示，导致访客无法找到你的网站，这是会让人丧失信心的事情。GSI快速收录服务就是为了解决这种问题而存在的。无论是新上线的页面，还是长期未被收录的内容，通过我们的技术支持，都能迅速被…...
vue2的$el.querySelector在vue3中怎么写
这个也属于直接操作 dom 了，不建议在项目中这样操作，不过我是在vue2升级vue3的时候遇到的，是以前同事写的代码，也没办法 先来看一下对比 在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 refxxx 的实例，并且…...
C++ list 容器用法
C list 容器用法 C 标准库提供了丰富的功能，其中 <list> 是一个非常重要的容器类，用于存储元素集合，支持双向迭代器。<list> 是 C 标准模板库（STL）中的一个序列容器，它允许在容器的任意位置快速…...
双目立体校正和Q矩阵
立体校正 对两个摄像机的图像平面重投影，使二者位于同一平面，而且左右图像的行对准。 Bouguet 该算法需要用到双目标定后外参(R，T) 从上图中可以看出，该算法主要分为两步： 使成像平面共面 这个办法很直观ÿ…...
又是一年啊
又是一年 回顾2024一、2024的愿望二、愿望实现了吗？三、总结 展望2025几个愿望~~（终于快写完了）~~ 华丽结尾 回顾2024 一、2024的愿望 1.CSP-J上岸； 2.小升初上岸； 3.数学进入联赛班； 4.初一期末年级前五…...
Spring Boot 邂逅Netty：构建高性能网络应用的奇妙之旅
一、引言 在当今数字化时代，构建高效、可靠的网络应用是开发者面临的重要挑战。Spring Boot 作为一款强大的 Java 开发框架，以其快速开发、简洁配置和丰富的生态支持，深受广大开发者喜爱。而 Netty 作为高性能、异步的网络通信框架ÿ…...
简识JVM私有内存区域栈、数据结构
前记：JVM稀有内存区域栈包含：虚拟机栈、本地方法栈、程序计数器； 在JVM（Java虚拟机）中，私有内存区域栈主要指的是虚拟机栈（VM Stack）和本地方法栈（Native Method Stack&…...
【C++基础】多线程并发场景下的同步方法
如果在多线程程序中对全局变量的访问没有进行适当的同步控制（例如使用互斥锁、原子变量等），会导致多个线程同时访问和修改全局变量时发生竞态条件（race condition）。这种竞态条件可能会导致一系列不确定和严重的后果。…...
【优选算法】10----无重复字符的最长子串
---------------------------------------begin--------------------------------------- 题目解析： 看到这一类题目，有没有那种一眼就感觉时要用到滑动窗口的感觉，铁子们？ 讲解算法原理： 方法一: 暴力解法ÿ…...
C语言程序设计十大排序—冒泡排序
文章目录 1.概念✅2.冒泡排序🎈3.代码实现✅3.1 直接写✨3.2 函数✨ 4.总结✅ 1.概念✅ 排序是数据处理的基本操作之一，每次算法竞赛都很多题目用到排序。排序算法是计算机科学中基础且常用的算法，排序后的数据更易于处理和查找。在计算机发展…...
26考研资料分享 百度网盘
基础班： 通过网盘分享的文件：2026【考研数学】等3个文件 链接:https://pan.baidu.com/s/1djzJiut1h0DH8WmrI05YHg?pwd1234 提取码:1234--来自百度网盘超级会员v3的分享 通过网盘分享的文件：01、2026【考研政治】 链接:https://pan.baidu.…...