Vue | 自定义组件双向绑定基础用法
Vue | 自定义组件双向绑定基础用法
vue 中,由于单向数据流,常规的父子组件属性更新,需要 在父组件绑定相应属性,再绑定相应事件,事件里去做更新的操作,利用语法糖 可以减少绑定事件的操作。
这里就简单的梳理一下vue提供的双向更新的语法糖用法(水一篇,为了节省篇幅只给了关键部分的代码)。
vue2
v-model
基础使用
<!-- 父组件 -->
<template><div class="vmodel-test">V-model 测试<hr />v-model 默认基础类型值 | <span>{{ val }}</span><inner v-model="val"></inner></div>
</template>export default {name: "VmodelTest",components: { inner },data() {return {val: 11111,}}
}
<!-- 子组件 -->
<template><div class="inner"><button @click="onUPdate">更改</button></div>
</template>
<script>
export default {name: "Inner",props: {value: {type: [String, Number],default: "",},},data() {return {};},methods: {onUPdate() {// 更新this.$emit("input", new Date().toLocaleString());},},
};
</script>

简单总结就是, 对于父组件 v-model 绑定的值,子组件 需要 定义一个 value 的props,然后更新时使用 input 事件 去更新值,适用于基础类型和对象类型,⚠️需要注意的是这种更新是全量更新(覆盖式)。
比如我 v-model 接受的是一个对象,我只想更新对象的 a 属性
// 更新
this.$emit("input", {...this.value,a: new Date().toLocaleString(),
});
自定义更新事件名
model: 允许一个自定义组件在使用
v-model时定制 prop 和 event。默认情况下,一个组件上的v-model会把value用作 prop 且把input用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用valueprop 来达到不同的目的。使用model选项可以回避这些情况产生的冲突。API — Vue.js
input 是默认事件,可以自定义,需要 在子组件 写一个 model(2.2新增) 属性去更改
model: {prop: "value", // 指定是更新valueevent: "custom-update-value", // 一般以 update:value 命名
},
props: {value: {type: [Array, Object],default: () => {},},
},
那么 更新时只需要用新的事件名,⚠️原来默认input事件已经失效
// 更新
this.$emit("custom-update-value", {...this.value,a: new Date().toLocaleString(),
});
sync 修饰符
基础使用
sync 修饰符也双向更新的一个方法,更适用于多个属性需要双向更新的场景
首先在父组件中绑定绑定的属性后面,跟上sync修饰符
sync 修饰符 | <span>{{ modelValue3 }}</span>
<inner3 :model-value.sync="modelValue3"></inner3>
子组件更新时, 事件名 update: 拼上 属性名
//...
props: {modelValue: {type: [Array, Object],default: () => {},},
},
//...
// 更新
this.$emit("update:modelValue", {...this.value,b: [1, new Date().toLocaleString()],
});

也是全量更新, ⚠️注意这种方式不支持 model 方式自定义事件名
一次性绑定多个(v-bind.sync)
支持 v-bind 一次性绑定多个值的方式
<!-- -->
sync 修饰符 对象解构传入(vbind) | <span>{{ modelValue4 }}</span>
<inner4 v-bind.sync="modelValue4"></inner4>//...(节省篇幅,只给出相应的data)
modelValue4: {a: { val: 111 },b: [1, 2]
},
/** 子组件 **/
props: {a: {type: [Array, Object],default: () => {},},b: {type: [Array, Object],default: () => {},},
},
//...
// 更新
this.$emit("update:a", {...this.a,val: new Date().toLocaleString(),
});
this.$emit("update:b", [1, new Date().toLocaleString()]);

vue3
v-model
基础使用
父组件传的v-model,子组件用 modelValue 接收
<!-- 父组件 -->
v-model 默认-对象类型值 | <span>{{ modelValue1 }}</span>
<inner1 v-model="modelValue1"></inner1>
子组件 使用 update:modelValue 更新值
<!-- 子组件 -->
<script setup lang='ts'>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])const onUPdate = () => {// 更新emit("update:modelValue", {...props.modelValue,a: new Date().toLocaleString(),});
}
</script>

均是全量更新
绑定多个值
<!-- 父组件 -->
v-model 绑定多个值 | <span>{{ modelValue2 }} | {{ modelValue21 }}</span>
<inner2 v-model:modelCusValue="modelValue2" v-model:modelCusValue1="modelValue21"
></inner2>
/** 子组件 **/
<script setup lang='ts'>const props = defineProps(['modelCusValue', 'modelCusValue1'])const emit = defineEmits(['update:modelCusValue', 'update:modelCusValue1'])const onUPdate = () => {// 更新emit("update:modelCusValue", {...props.modelCusValue,a: new Date().toLocaleString(),});emit("update:modelCusValue1", {...props.modelCusValue1,a: new Date().toLocaleString(),});}
</script>

也是全量更新
defineModel
基础使用
此宏为 3.4 新增,使用起来比前面的方式稍微简洁一些。装个
vue-eslint-parser且在vite.config.ts做如下配置 plugins, 避免编译器报错。export default defineConfig({plugins: [vue({// 开启 definModelscript: { defineModel: true }}),]//... })
<!-- 父组件 -->
defineModel() | <span>{{ modelData }} | {{ modelData1 }} | {{ modelData2 }}</span>
<inner3v-model="modelData" v-model:modelData1="modelData1" v-model:modelData2="modelData2"
></inner3>
//...
const modelData1 = ref({a: 1,b: [1, 2],
})
const modelData2 = ref({a: 1,b: [1, 2],
})
此方法在子组件使用 直接使用 属性 value 赋值就行了
<script setup lang='ts'>
type modelValueType = {a: number | string,b: Array<number>
}
let model = defineModel<modelValueType>({ required: true })
let model1 = defineModel<modelValueType>('modelData1', { required: true })
let model2 = defineModel<modelValueType>('modelData2', { required: true, type: Object,default: { a: 0, b: [2,3] }
})const onUPdate = () => {// 更新model.value = {...model.value,b: [2, 1],a: new Date().toLocaleString()}model1.value.a = new Date().toLocaleString();model2.value.a = new Date().toLocaleString();// 或者如下方式// Object.assign(model.value, { a: new Date().toLocaleString() });
}
</script>
这种方式 支持单个属性更新,全量更新只需全部赋值,比较灵活

最后
若行文有误,望评论区交流。
相关文章:
Vue | 自定义组件双向绑定基础用法
Vue | 自定义组件双向绑定基础用法 vue 中,由于单向数据流,常规的父子组件属性更新,需要 在父组件绑定相应属性,再绑定相应事件,事件里去做更新的操作,利用语法糖 可以减少绑定事件的操作。 这里就简单的梳…...
python使用modbustcp协议与PLC进行简单通信
AI应用开发相关目录 本专栏包括AI应用开发相关内容分享,包括不限于AI算法部署实施细节、AI应用后端分析服务相关概念及开发技巧、AI应用后端应用服务相关概念及开发技巧、AI应用前端实现路径及开发技巧 适用于具备一定算法及Python使用基础的人群 AI应用开发流程概…...
mongodb在游戏开发领域的优势
1、分布式id 游戏服务器里的大部分数据都是要求全局唯一的,例如玩家id,道具id。之所以有这种要求,是因为运营业务上需要进行合服操作,保证不同服的数据在进行合服之后,也能保证id不冲突。如果采用关系型数据库&#x…...
大数据Scala教程从入门到精通第十篇:Scala在IDEA中编写Hello World代码的简单说明
一:代码展示 object Main {def main(args: Array[String]): Unit {//SCALA中可以不写;//绿色的小三角达标的是这个类中有一个MAIN方法代表是可以执行的。//ctrl shift f10可以直接运行println("Hello world!")//Java中的类库我们可以直接使用System.o…...
【SPSS】基于因子分析法对水果茶调查问卷进行分析
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...
ElasticSearch学习篇12_《检索技术核心20讲》基础篇
背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243 课程分为基础篇、进阶篇、系统案例篇 主要记录企业课程学习过程课程大纲关键点,以文档形式记录笔记。 内容 检索技术:它是更底层的通用技术,…...
Reids高频面试题汇总总结
一、Redis基础 Redis是什么? Redis是一个开源的内存数据存储系统,它可以用作数据库、缓存和消息中间件。Redis支持多种数据结构,如字符串、哈希表、列表、集合、有序集合等,并提供了丰富的操作命令来操作这些数据结构。Redis的主要特点是什么? 高性能:Redis将数据存储在内…...
19 - grace数据处理 - 补充 - 地下水储量计算过程分解 - 冰后回弹(GIA)改正
19 - grace数据处理 - 补充 - 地下水储量计算过程分解 - 冰后回弹(GIA)改正 0 引言1 gia数据处理过程0 引言 由水量平衡方程可以将地下水储量的计算过程分解为3个部分,第一部分计算陆地水储量变化、第二部分计算地表水储量变化、第三部分计算冰后回弹改正、第四部分计算地下…...
车载客流统计设备:双目3D还原智能统计算法的应用与优势
随着城市交通的日益繁忙和公共交通系统的不断完善,对公交车等交通工具的客流统计和分析变得越来越重要。传统的客流统计方法往往存在效率低下、精度不足等问题,难以满足现代城市交通管理的需求。而基于双目3D还原智能统计算法的车载客流统计设备…...
U盘无法打开?数据恢复与预防措施全解析
在日常生活和工作中,U盘已成为我们存储和传输数据的重要工具。然而,有时我们会遇到U盘无法打开的情况,这无疑给我们带来了诸多不便。本文将深入探讨U盘打不开的现象、原因及解决方案,并分享如何预防此类问题的发生。 一、U盘无法访…...
apollo版本更新简要概述
apollo版本更新简要概述 Apollo 里程碑版本9.0重要更新Apollo 开源平台 9.0 的主要新特征如下:基于包管理的 PnC 扩展开发范式基于包管理的感知扩展开发范式全新打造的 Dreamview Plus 开发者工具感知模型全面升级,支持增量训练 版本8.0版本6.0 Apollo 里…...
基于心电疾病分类的深度学习模型部署应用于OrangePi Kunpeng Pro开发板
一、开发板资源介绍 该板具有4核心64位的处理器和8TOPS的AI算力,让我们验证一下,在该板上跑深度学习模型的效果如何? 二、配网及远程SSH登录访问系统 在通过microusb连接串口进入开发板调试,在命令行终端执行以下命令 1&#…...
vue中axios的使用
1.get请求 axios.get(http://127.0.0.1:2333/show_course, {params: {param: choice} }) .then((response) > {this.list response.data; }) .catch((error) > {console.error(error); }); 2.post请求:当需要向服务器提交数据以创建新资源时使用。例如&…...
Spark SQL【Java API】
前言 之前对 Spark SQL 的影响一直停留在 DSL 语法上面,感觉可以用 SQL 表达的,没有必要用 Java/Scala 去写,但是面试一段时间后,发现不少公司还是在用 SparkSQL 的,京东也在使用 Spark On Hive 而不是我以为的 Hive O…...
文心智能体平台丨创建你的四六级学习小助手
引言 在人工智能飞速发展的今天,我们迎来了文心智能体平台。该平台集成了最先进的人工智能技术,旨在为用户提供个性化、高效的学习辅助服务。今天,我们将向大家介绍如何利用文心智能体平台,创建一个专属于你的四六级学习小助手。…...
js全国省市区JSON数据(全)
AreaJson 就是全国省市区的具体数据信息,下面我自定义了一些方法,获取数据用的,不需要的可以删掉,只拿JSON内的数据即可 const AreaJson [{"name": "北京市","city": [{"name": "…...
轻量级 C Logger
目录 一、描述 二、实现效果 三、使用案例 四、内存检测 一、描述 最近实现一个 WS 服务器,内部需要一个日志打印记录服务器程序的运行过程,故自己实现了一个轻量级的 logger,主要包含如下特征: 可输出 debug、info、warn、er…...
哪里能下载到合适的衣柜3D模型素材?
室内设计师在进行家居设计时,衣柜3D模型素材是非常重要的工具。那么,哪里能下载到合适的衣柜3D模型素材呢? 一、建e网: ①建e网是一个专注于3D模型素材分享的平台,上面可以找到大量的衣柜3D模型。 ②该网站提供的模型种类丰富&am…...
计算机毕业设计 | SpringBoot+vue仓库管理系统(附源码)
1,绪论 1.1 项目背景 随着电子计算机技术和信息网络技术的发明和应用,使着人类社会从工业经济时代向知识经济时代发展。在这个知识经济时代里,仓库管理系统将会成为企业生产以及运作不可缺少的管理工具。这个仓库管理系统是由:一…...
【Python】解决Python报错:TypeError: can only concatenate str (not “int“) to str
🧑 博主简介:阿里巴巴嵌入式技术专家,深耕嵌入式人工智能领域,具备多年的嵌入式硬件产品研发管理经验。 📒 博客介绍:分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
Python 高效图像帧提取与视频编码:实战指南
Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...
