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

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. 最佳实践

  1. 命名规范

    • 使用语义化的 prop 名称
    • 保持事件名称与 prop 名称的一致性
    • 使用 update: 前缀作为事件名称
  2. 类型检查

    • 为 props 定义明确的类型
    • 在必要时添加自定义验证
    • 处理无效输入
  3. 值的验证

    • 在更新值之前进行验证
    • 提供适当的错误反馈
    • 实现合理的默认值处理
  4. 性能优化

    • 避免不必要的值更新
    • 使用计算属性优化复杂逻辑
    • 合理使用防抖和节流

相关文章:

vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定

1. 基础用法 在 Vue3 中&#xff0c;v-model 在组件上的使用有了更灵活的方式。默认情况下&#xff0c;v-model 使用 modelValue 作为 prop&#xff0c;update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…...

使用 Python 和 Tesseract 实现验证码识别

验证码识别是一个常见且实用的技术需求&#xff0c;尤其是在自动化测试和数据采集场景中。通过开源 OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;工具 Tesseract&#xff0c;结合 Python 的强大生态&#xff0c;我们可以高效实现验证码识…...

谈一谈前端构建工具的本地代理配置(Webpack与Vite)

在Web前端开发中&#xff0c;我们在本地写代码经常遇到的一件事情就是代理配置。代理配置说简单也简单&#xff0c;配置一次基本就一劳永逸&#xff0c;但有时候配置不对&#xff0c;无论如何也连不上后端&#xff0c;就成了非常头疼的一件事。在这本文中&#xff0c;我们讨论一…...

CentOS7非root用户离线安装Docker及常见问题总结、各种操作系统docker桌面程序下载地址

环境说明 1、安装用户有sudo权限 2、本文讲docker组件安装&#xff0c;不是桌面程序安装 3、本文讲离线安装&#xff0c;不是在线安装 4、目标机器是内网机器&#xff0c;与外部网络不连通 下载 1、下载离线安装包&#xff0c;并上传到$HOME/basic-tool 目录 下载地址&am…...

Alibaba Spring Cloud 十三 Nacos,Gateway,Nginx 部署架构与负载均衡方案

在微服务体系中&#xff0c;Nacos 主要承担“服务注册与发现、配置中心”的职能&#xff0c;Gateway&#xff08;如 Spring Cloud Gateway&#xff09;通常负责“路由转发、过滤、安全鉴权、灰度流量控制”等功能&#xff0c;而 Nginx 则常被用作“边缘反向代理”或“统一流量入…...

+-*/运算符优先级计算模板

acwing3302 知识点一&#xff1a;有关unordered_map的优先级 头文件<unordered_map>,然后进行符号优先级定义 定义方式unordered_map<char,int>pr{ {,1},{-,1},{*,2},{/,2}};其余没定义的默认为0 知识点二&#xff1a;头文件<cctype>中的isdigit()是判断…...

GPT 结束语设计 以nanogpt为例

GPT 结束语设计 以nanogpt为例 目录 GPT 结束语设计 以nanogpt为例 1、简述 2、分词设计 3、结束语断点 1、简述 在手搓gpt的时候&#xff0c;可能会遇到一些性能问题&#xff0c;即关于是否需要全部输出或者怎么节约资源。 在输出语句被max_new_tokens 限制&#xff0c…...

FastDFS的安装及使用

分布式存储发展历程 前段时间 618 活动火热进行&#xff0c;正是购物的好时机。当我们访问这些电 商网站的时候&#xff0c;每一个商品都会有各式各样的图片展示介绍&#xff0c;这些图 片一张两张可以随便丢在服务器的某个文件夹中&#xff0c;可是电商网站如此 大体量的…...

C++ lambda表达式

目录 1.lambda表达式 1.1什么是Lambda表达式&#xff1f; 1.2Lambda表达式的语法 1.3捕捉列表 1.4函数对象与lambda表达式 1.lambda表达式 1.1什么是Lambda表达式&#xff1f; Lambda表达式是C11标准引入的一种匿名函数&#xff0c;它允许你在需要函数的地方直接编写代码…...

react页面定时器调用一组多个接口,如果接口请求返回令牌失效,清除定时器不再触发这一组请求

为了实现一个React页面使用定时器调用一组多个接口&#xff0c;并在任意一个接口请求返回令牌失效时清除定时器且不再触发这一组请求&#xff0c;可以遵循以下步骤&#xff1a; 1. 定义API调用函数&#xff1a;创建一个函数来处理一组API调用。每个API调用都应该检查响应状态以…...

Python的泛型(Generic)与协变(Covariant)

今天咱们聊聊Python类型标注中的泛型(Generic),与协变(Covariant)。 不了解类型标注的小伙伴,可以先看一看我的上一篇文章 “Python类型检查” Python 类型检查-CSDN博客 例子 这次我开个宠物商店。看下面代码。 class Animal:passclass Dog(Animal):passclass Cat(A…...

Python Typing: 实战应用指南

文章目录 1. 什么是 Python Typing&#xff1f;2. 实战案例&#xff1a;构建一个用户管理系统2.1 项目描述2.2 代码实现 3. 类型检查工具&#xff1a;MyPy4. 常见的 typing 用法5. 总结 在 Python 中&#xff0c;静态类型检查越来越受到开发者的重视。typing 模块提供了一种方式…...

OpenEuler学习笔记(六):OpenEuler与其他Linux服务器的区别是什么?

OpenEuler是一款基于Linux内核的开源服务器操作系统&#xff0c;与其他Linux服务器操作系统&#xff08;如CentOS、Ubuntu Server等&#xff09;存在多方面的区别&#xff0c;主要体现在以下几个方面&#xff1a; 一、社区与支持 OpenEuler&#xff1a;由华为发起并开源&…...

如何使用CRM数据分析和洞察来支持业务决策和市场营销?

如何使用CRM数据分析和洞察来支持业务决策和市场营销&#xff1f; 大家好&#xff01;今天咱们聊聊一个特别重要的话题——如何利用客户关系管理&#xff08;CRM&#xff09;系统中的数据进行分析与洞察能够帮助我们做出更好的业务决策以及提升市场营销效果。其实啊&#xff0…...

MyBatis和JPA区别详解

文章目录 MyBatis和JPA区别详解一、引言二、设计理念与使用方式1、MyBatis&#xff1a;半自动化的ORM框架1.1、代码示例 2、JPA&#xff1a;全自动的ORM框架2.1、代码示例 三、性能优化与适用场景1、MyBatis&#xff1a;灵活的SQL控制1.1、适用场景 2、JPA&#xff1a;开发效率…...

SVN客户端使用手册

目录 一、简介 二、SVN的安装与卸载 1. 安装&#xff08;公司内部一般会提供安装包和汉化包&#xff0c;直接到公司内部网盘下载即可&#xff0c;如果找不到可以看下面的教程&#xff09; 2. 查看SVN版本 ​编辑 3. SVN卸载 三、SVN的基本操作 1. 检出 2. 清除认证数据 3. 提交…...

VsCode安装文档

一、下载 进入VS Code官网&#xff1a;Visual Studio Code - Code Editing. Redefined&#xff0c;点击 DownLoad for Windows下载windows版本 当然也可以点击旁边的箭头&#xff0c;下载Windows版本 或 Mac OS 版本 备注&#xff1a; Stable&#xff1a;稳定版Insiders&#…...

豆包MarsCode 蛇年编程大作战 | 高效开发“蛇年运势预测系统”

&#x1f31f; 嗨&#xff0c;我是LucianaiB&#xff01; &#x1f30d; 总有人间一两风&#xff0c;填我十万八千梦。 &#x1f680; 路漫漫其修远兮&#xff0c;吾将上下而求索。 豆包MarsCode 蛇年编程大作战 | &#x1f40d; 蛇年运势预测 在线体验地址&#xff1a;蛇年…...

【动态规划】--- 斐波那契数模型

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Journey &#x1f3e0; 第N个泰波那契数模型 &#x1f4cc; 题目解析 第N个泰波那契数 题目要求的是泰波那契数&#xff0c;并非斐波那契数。 &…...

生信软件管家——conda vs pip

pip vs conda&#xff1a; 安装过python包的人自然两种管理软件都用过&#xff0c; Pip install和Conda install在Python环境中用于安装第三方库和软件包&#xff0c;但它们在多个方面存在显著的区别 总的来说&#xff1a; pip是包管理软件&#xff0c;conda既是包管理软件&…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...