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. 性能优化

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/68172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP协议(网络)

目录 TCP协议 TCP协议段格式(报文首部) 原理图​编辑 确认应答(ACK)机制 报头介绍 超时重传机制​编辑 连接管理机制 为什么要三次握手 服务端状态转化: 客户端状态转化: 理解TIME_WAIT状态 解决TIME_WAIT状态引起的bind失败的方法(可以立即链接端口号) setsockop…

【JS|第29期】JavaScript中的事件类型

日期&#xff1a;2025年1月25日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

基于Java+socket实现多线程聊天室-控制台版

基于Javasocket实现多线程聊天室-控制台版 一、系统介绍二、功能展示1.运行效果 三、代码展示四、其它1.其他系统实现2.获取源码 一、系统介绍 首先启动server端&#xff0c;然后启动client端。任意一个client发送给server的消息都将会被转发给所有在线的client&#xff0c;实…

Redis-缓存

1.缓存 1.1 什么是缓存&#xff1f; 越野车,山地自行车,都拥有"避震器",防止车体加速后因惯性,在酷似"U"字母的地形上飞跃,硬着陆导致的损害,像个弹簧一样;同样,实际开发中,系统也需要"避震器",防止过高的数据访问猛冲系统,导致其操作线程无法…

群晖docker获取私有化镜像http: server gave HTTP response to HTTPS client].

群晖docker获取私有化镜像提示http: server gave HTTP response to HTTPS clien 问题描述 层级时间用户事件Information2023/07/08 12:47:45cxlogeAdd image from xx.xx.31.240:1923/go-gitea/gitea:1.19.3Error2023/07/08 12:47:48cxlogeFailed to pull image [Get "http…

MySQL日志详解——日志分类、二进制日志bin log、回滚日志undo log、重做日志redo log

文章目录 一、前言1.1 MySQL体系结构1.2 MySQL日志分类1.3 其他几种日志1.3.1 查询日志1.3.2 慢查询日志1.3.3 错误日志 二、bin log 二进制日志2.1 bin log简介2.2 binlog日志格式2.3 日志删除2.4 写入/刷盘机制 三、undo log 回滚日志3.1 undo log简介3.2 隐藏字段 —— 事务…

算法中的移动窗帘——C++滑动窗口算法详解

1. 滑动窗口简介 滑动窗口是一种在算法中常用的技巧&#xff0c;主要用来处理具有连续性的子数组或子序列问题。通过滑动窗口&#xff0c;可以在一维数组或字符串上维护一个固定或可变长度的窗口&#xff0c;逐步移动窗口&#xff0c;避免重复计算&#xff0c;从而提升效率。常…

亚博microros小车-原生ubuntu支持系列:11手指控制与手势识别

识别框架还是沿用之前的了MediaPipe Hand。 背景知识不摘重复&#xff0c;参见之前的&#xff1a;亚博microros小车-原生ubuntu支持系列&#xff1a;10-画笔-CSDN博客 手指控制 src/yahboom_esp32_mediapipe/yahboom_esp32_mediapipe/目录下新建文件10_HandCtrl.py&#xff…

LabVIEW太阳能照明监控系统

在公共照明领域&#xff0c;传统的电力照明系统存在高能耗和维护不便等问题。利用LabVIEW开发太阳能照明监控系统&#xff0c;通过智能控制和实时监测&#xff0c;提高能源利用效率&#xff0c;降低维护成本&#xff0c;实现照明系统的可持续发展。 ​ 项目背景 随着能源危机…

今何在:“思索答案就是一种对虚无的战斗”

今何在&#xff08;网络文学作家、编剧&#xff09; 白惠元&#xff08;北京师范大学文学院副教授&#xff09; 网络文学发展二十余年来&#xff0c;其创作生态虽历经迭代&#xff0c;同时也为当代文学版图留下了一些经典性长篇作品。本栏目邀请北京大学网络文学研究团队&…

Linux的权限和一些shell原理

目录 shell的原理 Linux权限 sudo命令提权 权限 文件的属性 ⽂件类型&#xff1a; 基本权限&#xff1a; chmod改权限 umask chown 该拥有者 chgrp 改所属组 最后&#xff1a; 目录权限 粘滞位 shell的原理 我们广义上的Linux系统 Linux内核Linux外壳 Linux严格…

Avalonia UI MVVM DataTemplate里绑定Command

Avalonia 模板里面绑定ViewModel跟WPF写法有些不同。需要单独绑定Command. WPF里面可以直接按照下面的方法绑定DataContext. <Button Content"Button" Command"{Binding DataContext.ClickCommand, RelativeSource{RelativeSource AncestorType{x:Type User…

MATLAB语言的文件操作

MATLAB语言的文件操作 1. 引言 MATLAB是一种高性能的语言&#xff0c;广泛应用于数学计算、数据分析和可视化等领域。在实际的应用中&#xff0c;经常需要对文件进行操作&#xff0c;包括读取文件、写入文件以及对文件进行修改等。本文将详细探讨MATLAB的文件操作&#xff0c…

用wordpress搭建跨境电商独立站后没有询盘该怎么办

如果在使用WordPress搭建跨境电商独立站后没有收到询盘&#xff0c;可以采取以下详细解决办法&#xff1a; 优化网站基础建设 选择合适的域名和主机 建议选择国际化的域名(如以.com结尾)&#xff0c;并选择支持SEO优化的主机服务商&#xff0c;例如Namecheap或SiteGround&am…

ConnectionResetError: [Errno 104] Connection reset by peer

python遇到这样一个报错&#xff1a; imap imaplib.IMAP4_SSL("outlook.office365.com", 993)File "/usr/lib/python3.9/imaplib.py", line 1324, in __init__IMAP4.__init__(self, host, port, timeout)File "/usr/lib/python3.9/imaplib.py",…

WPF常见面试题解答

以下是WPF&#xff08;Windows Presentation Foundation&#xff09;面试中常见的问题及解答&#xff0c;涵盖基础概念、高级功能和实际应用&#xff0c;帮助你更好地准备面试&#xff1a; 基础概念 什么是WPF&#xff1f; WPF是微软开发的用于构建桌面应用程序的UI框架&#x…

Redis - 数据类型与编码方式

Redis中常用的5种数据类型 包括字符串、哈希、列表、集合、有序集合 字符串&#xff0c;相当于Java中的String哈希&#xff0c;相当于Java中的HashMap列表&#xff0c;相当于Java中的List集合&#xff0c;相当于Java中的Set有序集合&#xff0c;多存储了一个权重 Redis承诺使…

git Bash通过SSH key 登录github的详细步骤

1 问题 通过在windows 终端中的通过git登录github 不再是通过密码登录了&#xff0c;需要本地生成一个密钥&#xff0c;配置到gihub中才能使用 2 步骤 &#xff08;1&#xff09;首先配置用户名和邮箱 git config --global user.name "用户名"git config --global…

如何为64位LabVIEW配置正确的驱动程序

在安装 64位 LabVIEW 后&#xff0c;确保驱动程序正确配置是关键。如果您首先安装了 32位 LabVIEW 和相关驱动&#xff0c;然后安装了 64位 LabVIEW&#xff0c;需要确保为 64位 LabVIEW 安装和配置适当的驱动程序&#xff0c;才能正常访问硬件设备。以下是详细步骤&#xff1a…

BGP边界网关协议(Border Gateway Protocol)路由聚合详解

一、路由聚合 1、意义 在大规模的网络中&#xff0c;BGP路由表十分庞大&#xff0c;给设备造成了很大的负担&#xff0c;同时使发生路由振荡的几率也大大增加&#xff0c;影响网络的稳定性。 路由聚合是将多条路由合并的机制&#xff0c;它通过只向对等体发送聚合后的路由而…