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…...
使用 Python 和 Tesseract 实现验证码识别
验证码识别是一个常见且实用的技术需求,尤其是在自动化测试和数据采集场景中。通过开源 OCR(Optical Character Recognition,光学字符识别)工具 Tesseract,结合 Python 的强大生态,我们可以高效实现验证码识…...
谈一谈前端构建工具的本地代理配置(Webpack与Vite)
在Web前端开发中,我们在本地写代码经常遇到的一件事情就是代理配置。代理配置说简单也简单,配置一次基本就一劳永逸,但有时候配置不对,无论如何也连不上后端,就成了非常头疼的一件事。在这本文中,我们讨论一…...
CentOS7非root用户离线安装Docker及常见问题总结、各种操作系统docker桌面程序下载地址
环境说明 1、安装用户有sudo权限 2、本文讲docker组件安装,不是桌面程序安装 3、本文讲离线安装,不是在线安装 4、目标机器是内网机器,与外部网络不连通 下载 1、下载离线安装包,并上传到$HOME/basic-tool 目录 下载地址&am…...
Alibaba Spring Cloud 十三 Nacos,Gateway,Nginx 部署架构与负载均衡方案
在微服务体系中,Nacos 主要承担“服务注册与发现、配置中心”的职能,Gateway(如 Spring Cloud Gateway)通常负责“路由转发、过滤、安全鉴权、灰度流量控制”等功能,而 Nginx 则常被用作“边缘反向代理”或“统一流量入…...
+-*/运算符优先级计算模板
acwing3302 知识点一:有关unordered_map的优先级 头文件<unordered_map>,然后进行符号优先级定义 定义方式unordered_map<char,int>pr{ {,1},{-,1},{*,2},{/,2}};其余没定义的默认为0 知识点二:头文件<cctype>中的isdigit()是判断…...
GPT 结束语设计 以nanogpt为例
GPT 结束语设计 以nanogpt为例 目录 GPT 结束语设计 以nanogpt为例 1、简述 2、分词设计 3、结束语断点 1、简述 在手搓gpt的时候,可能会遇到一些性能问题,即关于是否需要全部输出或者怎么节约资源。 在输出语句被max_new_tokens 限制,…...
FastDFS的安装及使用
分布式存储发展历程 前段时间 618 活动火热进行,正是购物的好时机。当我们访问这些电 商网站的时候,每一个商品都会有各式各样的图片展示介绍,这些图 片一张两张可以随便丢在服务器的某个文件夹中,可是电商网站如此 大体量的…...
C++ lambda表达式
目录 1.lambda表达式 1.1什么是Lambda表达式? 1.2Lambda表达式的语法 1.3捕捉列表 1.4函数对象与lambda表达式 1.lambda表达式 1.1什么是Lambda表达式? Lambda表达式是C11标准引入的一种匿名函数,它允许你在需要函数的地方直接编写代码…...
react页面定时器调用一组多个接口,如果接口请求返回令牌失效,清除定时器不再触发这一组请求
为了实现一个React页面使用定时器调用一组多个接口,并在任意一个接口请求返回令牌失效时清除定时器且不再触发这一组请求,可以遵循以下步骤: 1. 定义API调用函数:创建一个函数来处理一组API调用。每个API调用都应该检查响应状态以…...
Python的泛型(Generic)与协变(Covariant)
今天咱们聊聊Python类型标注中的泛型(Generic),与协变(Covariant)。 不了解类型标注的小伙伴,可以先看一看我的上一篇文章 “Python类型检查” Python 类型检查-CSDN博客 例子 这次我开个宠物商店。看下面代码。 class Animal:passclass Dog(Animal):passclass Cat(A…...
Python Typing: 实战应用指南
文章目录 1. 什么是 Python Typing?2. 实战案例:构建一个用户管理系统2.1 项目描述2.2 代码实现 3. 类型检查工具:MyPy4. 常见的 typing 用法5. 总结 在 Python 中,静态类型检查越来越受到开发者的重视。typing 模块提供了一种方式…...
OpenEuler学习笔记(六):OpenEuler与其他Linux服务器的区别是什么?
OpenEuler是一款基于Linux内核的开源服务器操作系统,与其他Linux服务器操作系统(如CentOS、Ubuntu Server等)存在多方面的区别,主要体现在以下几个方面: 一、社区与支持 OpenEuler:由华为发起并开源&…...
如何使用CRM数据分析和洞察来支持业务决策和市场营销?
如何使用CRM数据分析和洞察来支持业务决策和市场营销? 大家好!今天咱们聊聊一个特别重要的话题——如何利用客户关系管理(CRM)系统中的数据进行分析与洞察能够帮助我们做出更好的业务决策以及提升市场营销效果。其实啊࿰…...
MyBatis和JPA区别详解
文章目录 MyBatis和JPA区别详解一、引言二、设计理念与使用方式1、MyBatis:半自动化的ORM框架1.1、代码示例 2、JPA:全自动的ORM框架2.1、代码示例 三、性能优化与适用场景1、MyBatis:灵活的SQL控制1.1、适用场景 2、JPA:开发效率…...
SVN客户端使用手册
目录 一、简介 二、SVN的安装与卸载 1. 安装(公司内部一般会提供安装包和汉化包,直接到公司内部网盘下载即可,如果找不到可以看下面的教程) 2. 查看SVN版本 编辑 3. SVN卸载 三、SVN的基本操作 1. 检出 2. 清除认证数据 3. 提交…...
VsCode安装文档
一、下载 进入VS Code官网:Visual Studio Code - Code Editing. Redefined,点击 DownLoad for Windows下载windows版本 当然也可以点击旁边的箭头,下载Windows版本 或 Mac OS 版本 备注: Stable:稳定版Insiders&#…...
豆包MarsCode 蛇年编程大作战 | 高效开发“蛇年运势预测系统”
🌟 嗨,我是LucianaiB! 🌍 总有人间一两风,填我十万八千梦。 🚀 路漫漫其修远兮,吾将上下而求索。 豆包MarsCode 蛇年编程大作战 | 🐍 蛇年运势预测 在线体验地址:蛇年…...
【动态规划】--- 斐波那契数模型
Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏: 算法Journey 🏠 第N个泰波那契数模型 📌 题目解析 第N个泰波那契数 题目要求的是泰波那契数,并非斐波那契数。 &…...
生信软件管家——conda vs pip
pip vs conda: 安装过python包的人自然两种管理软件都用过, Pip install和Conda install在Python环境中用于安装第三方库和软件包,但它们在多个方面存在显著的区别 总的来说: pip是包管理软件,conda既是包管理软件&…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
