Vue3 双向绑定

需求:父和子实现双向数据绑定 (Vue3.4+)

  单参数实现:

父组件------------------<UserNamev-model:first-name="first"v-model:last-name="last"
/>子组件:------------<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script><template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

2、对象传递


对象:interface Obj{username:'',password:''
}父组件---------------------------
<UserNamev-model:first-name="first"v-model:last-name="last"v-model:obj='userInfo'
/>
<script setup>const userInfo=ref<obj>({username:'张三',password:'123456'
})
</script>子组件----------------------------------
const userInfo=defineModel<String[]>("ojb", {type: Array,default: () => [],
});<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

注:defineModel:返回的对象ref的,在script中使用时需要加.value获取值,如果是对象传值必须加默认值

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

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

相关文章

Kotlin学习笔记 泛型

在 Kotlin 中&#xff0c;T 通常用作类型参数的占位符&#xff0c;它在实例化或传递参数时会被替换成具体的类型。 Kotlin 支持泛型&#xff0c;这意味着您可以编写可以与多种数据类型一起工作的代码&#xff0c;而不必为每种数据类型编写单独的代码。 ### 泛型类和函数 在 …

记录贴 Elasticsearch的RestClient进行DSL查询

must&#xff1a;必须匹配每个子查询&#xff0c;类似“与” should&#xff1a;选择性匹配子查询&#xff0c;类似“或” must_not&#xff1a;必须不匹配&#xff0c;不参与算分&#xff0c;类似“非” filter&#xff1a;必须匹配&#xff0c;不参与算分 import cn.huto…

Kali 我来了

Kali 我来了 1、官网下载2、修改密码3、开启SSH远程登录服务4、关闭kali图形化界面 1、官网下载 官方链接: https://www.kali.org/ 下载链接: https://cdimage.kali.org/kali-2024.1/kali-linux-2024.1-vmware-amd64.7z 解压后 直接导入 VmWare 就可使用可爱的小 Kali 了。 …

AOP——学习

AOP&#xff08;面向切面编程&#xff09;是Spring框架的重要特性之一&#xff0c;用于分离关注点并处理横切关注点&#xff0c;如日志记录、安全性和事务管理。在面试中&#xff0c;AOP相关的问题通常会涉及基本概念、应用场景、实际使用、以及与其他编程范式的比较。以下是一…

LabVIEW机器设备的振动监测

振动监测是工业和机械维护中重要的一部分&#xff0c;通过检测和分析机械振动&#xff0c;提前发现潜在故障&#xff0c;确保设备的可靠运行。LabVIEW是一种强大的图形化编程环境&#xff0c;非常适合用于振动监测系统的开发和实施。以下从多个角度详细介绍LabVIEW在振动监测中…

互联网应用主流框架整合之数据库编程

Spring最重要的功能就是操作数据&#xff0c;数据库编程也是互联网编程的基础&#xff0c;Spring为开发者提供了JDBC模板模式&#xff0c;使用JdbcTemplate可以简化许多编码工作&#xff0c;同时也提供了TransactionTemplate支持事务的模板&#xff0c;但都不是常用技术&#x…

管理能力学习笔记十一:如何通过反馈做好辅导

关于辅导的常见错误 辅导过于细致 辅导的首要障碍: 不相信对方的潜力需要有成长型思维&#xff1a;即便员工现在不OK&#xff0c;未来会更好因材施教&#xff1a;对不同风格的下属&#xff0c;采取不同的辅导风格 凡事亲力亲为 作为管理者&#xff0c;我们要做的是&#xf…

【Unity2D 2022:Particle System】添加粒子特效

一、创建粒子系统游戏物体 1. 创建粒子系统游戏物体Smog Effect 2. 给粒子特效添加精灵贴图 &#xff08;1&#xff09;启用Texture Sheet Animation&#xff08;纹理表动画&#xff09; &#xff08;2&#xff09;点击加号添加一个纹理&#xff0c;并将两张厌恶图片导入到纹理…

【YashanDB知识库】OCI驱动类问题定位方法

【标题】OCI驱动类问题定位方法 【需求分类】故障分析 【关键字】OCI 【需求描述】由于我们的OCI接口目前尚不完善&#xff0c;经常会遇见OCI接口能力不足导致应用功能无法运行的问题&#xff0c;需要定位手段确定底层是哪个接口报错 【需求原因分析】方便一线数据库管理员…

使用jdk自带jhat工具排查OOM问题

使用jdk自带jhat工具排查OOM问题 OOM java.lang.OutOfMemoryError: Java heap space排查步骤 编写一个测试类 public class TestJVM {Testpublic void test1() throws InstantiationException, IllegalAccessException {List<A> list new ArrayList<>();for (i…

做抖音小店什么类目最容易爆单?搞懂这三点就明白了!

大家好&#xff0c;我是电商糖果 我们刚接触电商的时候&#xff0c;一定经常听一些同行念叨&#xff0c;选择大于努力&#xff0c;类目大于一切。 很多电商人把选类目比做定生死。 类目选对了&#xff0c;让你轻松飞升不是问题&#xff0c;类目选错了&#xff0c;基本被判了…

【YOLOv10】使用yolov10训练自己的数据集/验证 /推理 /导出模型/ONNX模型的使用

YOLOv10: 实时端到端的目标检测。 性能 YOLOv10比最先进的YOLOv9延迟时间更低&#xff0c;测试结果可以与YOLOv9媲美&#xff0c;可能会成为YOLO系列模型部署的“新选择”。 目录 1 数据准备 2 配置文件 3 训练 4 验证 5 预测 6 导出模型 7 ONNX模型的使用 官方论文地址…

从源头治理:数据提取阶段的数据安全控制与合规性设计

在数字化转型加速推进的今天&#xff0c;数据已成为企业的核心资产之一。然而&#xff0c;随着数据量的激增和数据来源的多样化&#xff0c;数据提取过程中的安全与合规问题日益凸显&#xff0c;成为企业不可忽视的风险点。本文将探讨如何在数据提取阶段实施有效的数据安全控制…

学习笔记——动态路由协议——OSPF(OSPF网络类型1)

五、OSPF网络类型 网络类型&#xff1a;是指运行OSPF网段的二层链路类型。 1、OSPF网络类型简介 (1) OSPF网络类型 MA(Multi-Access &#xff0c;多路访问)在一个网段内的节点数量不限制(一条链路上有多个访问点)。MA的网络一般分为两种&#xff1a; 1)广播式多路访问网络…

oracle数据库无法连接问题排查

查看数据库告警日志如下图。发现问题时间段&#xff0c;没有数据库服务故障报错&#xff0c;但是存在较多TNS-12535、12560、12170、00505错误&#xff1a; 通过检查问题时间段应用日志&#xff0c;也记录了Caused by:java.sql.SQLRecoverableException: IO 错误: Connection r…

音乐传奇告别之作:《杰作》未解之谜❗❗

坂本龙一的《杰作》不仅是一部音乐会纪录电影&#xff0c;更是他赠予世界的一封深情告别信。 这部影片精心收录了这位音乐巨匠生前最后一场钢琴独奏音乐会的珍贵瞬间&#xff0c; 其中涵盖了《圣诞快乐&#xff0c;劳伦斯先生》、《末代皇帝》、《水》等二十首令人陶醉的经典…

c++常用设计模式

1、单例模式(Singleton)&#xff1a;保证一个类只有一个实例&#xff0c;提供一个全局访问点&#xff1b; class Singleton { private:static Singleton* instance;Singleton() {}public:static Singleton* getInstance() {if (instance nullptr) {instance new Singleton()…

分布式事务-TCC

分布式事务TCC是一种补偿式的分布式事务解决方案&#xff0c;旨在保证在分布式系统中&#xff0c;跨多个服务或资源的事务能够保持一致性和可靠性。 一、TCC概述 TCC&#xff0c;全称Try-Confirm-Cancel&#xff0c;是一种用于处理分布式事务的协议。其核心思想是通过在业务逻…

誉天Linux云计算架构师就业班要学习哪些内容?

课程设计思路&#xff1a; 根据十多年来毕业学员的就业和反馈&#xff0c;对数百名学员的就业回访;Linux运维&#xff0c;云计算&#xff0c;高并发&#xff0c;分布式&#xff0c;容器&#xff0c;云原生&#xff0c;自动化等是目前市场上就业情况最好&#xff0c;需求量最大&…

Python面向对象学习笔记

Python面向对象编程 记录人&#xff1a; 李思成 时间&#xff1a; 2024/05/01至2024/05/23 课程来源&#xff1a; B站Python面向对象 1.面向对象编程概述 官方概述 程序是指令的集合&#xff0c;运行程序时&#xff0c;程序中的语句会变成一条或多条指令&#xff0c;然后…