【Vue3】使用v-model实现父子组件通信(常用在组件封装规范中)

历史小剧场

历史告诉我们,痞子就算混一辈子,也还是痞子,滑头,最后只能滑自己。长得帅,不能当饭吃。
成大器者的唯一要诀,是能吃亏。
吃亏就是占便宜,原先我不信,后来我信了,相当靠谱。----《明朝那些事儿》

概述

v-mode实现父子组件数据同步原理主要分为:

  • 父组件添加modelValue绑定数据且传递到子组件,然后绑定@update:modelValue事件接收子组件传过来的值
  • 子组件内部使用defineProps来接收父组件modelValue传过来的值,使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件

同步单个数据

父组件

<!--  -->
<template><div><!-- v-model用在HTML--><!-- <input type="text" v-model="username"> --><!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> --><h4>账号: {{ username }}</h4><h4>密码: {{ pwd }}</h4><!-- v-model用在自定义组件上 --><!-- <XinchaoInput v-model:username="username" v-model:pwd="pwd" /> --><XinchaoInput :username="username"@update:username="username = $event" /></div>
</template><script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';const username = ref<string>("张三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {console.log(newValue)
})
</script><style lang="scss" scoped></style>

子组件

<!--  -->
<template><div><input type="text":value="username"@input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" /><!-- <br><input type="text":value="pwd"@input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" /> --></div>
</template><script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])</script><style lang="scss" scoped>
input {border: 2px solid #ccc;border-radius: 5px;padding: 2px;background-color: darkcyan;color: white;
}
</style>

同步多个数据

父组件

<!--  -->
<template><div><!-- v-model用在HTML--><!-- <input type="text" v-model="username"> --><!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> --><h4>账号: {{ username }}</h4><h4>密码: {{ pwd }}</h4><!-- v-model用在自定义组件上 --><XinchaoInput v-model:username="username" v-model:pwd="pwd" /><!-- <XinchaoInput :username="username"@update:username="username = $event" /> --></div>
</template><script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';const username = ref<string>("张三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {console.log(newValue)
})
</script><style lang="scss" scoped></style>

子组件

<!--  -->
<template><div><input type="text":value="username"@input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" /><br><input type="text":value="pwd"@input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" /></div>
</template><script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])</script><style lang="scss" scoped>
input {border: 2px solid #ccc;border-radius: 5px;padding: 2px;background-color: darkcyan;color: white;
}
</style>

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

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

相关文章

Oracle数据库之多行函数(十九)

Oracle多行函数&#xff08;也称为聚合函数或组函数&#xff09;作用于一组数据&#xff0c;并对该组数据返回一个单一的值。这些函数在处理分组数据或对整个表进行汇总操作时非常有用。以下是一些常见的Oracle多行函数及其描述&#xff1a; 1. AVG 功能&#xff1a;计算某列…

Java17 --- RabbitMQ之插件使用

目录 一、Federation插件 1.1、运行两个rabbitmq实例 1.2、启用插件 1.3、在下游端点添加上游端点 1.4、创建策略 1.6、测试 二、联邦队列 2.1、创建策略 2.2、创建交换机与队列 2.2.1、创建52000的队列与交换机 2.2.2、创建62000的队列 三、Shovel 3.1、启…

Echats-wordcloud 文字云图的踩坑点【Unknown series wordCloud】

在词云渲染时遇到渲染不出来的问题&#xff1a; 原因分析&#xff1a; 1、echart和wordcloud版本不匹配&#xff08;我的是匹配的&#xff09; 解决方案&#xff1a; 1、echart和wordcloud版本要匹配&#xff1a; echart4x 使用wordcloud1x版本 echart5x 使用wordcloud2x版本…

Echarts图表: 矩形树图都有哪些配置项,一文告诉你

Hello&#xff0c;本期和大家分享矩形树图的配置项&#xff0c;欢迎评论区和贝格前端工场互动交流。 一、矩形树图是什么 矩形树图是ECharts中的一种图表类型&#xff0c;用于展示树形结构的数据。矩形树图通过矩形的大小和位置来表示树形结构中节点的层次关系和数据的大小。…

C语言:头歌计算两数的和与差

任务描述 本关任务&#xff1a;本题要求实现一个计算输入的两数的和与差的简单函数。 函数接口定义&#xff1a; void sum_diff( float op1, float op2, float *psum, float *pdiff ); 其中op1和op2是输入的两个实数&#xff0c;*psum和*pdiff是计算得出的和与差。 主程序样…

实例化游戏物体的实例(生成游戏物体)

一、实例1&#xff1a;实例化 1、准备工作&#xff1a;制备预制体&#xff0c;命名。如Circle 2、Create Empty&#xff0c;名字自取。如&#xff1a;CirclePrefab 3、给CirclePrefab添加Test.cs public GameObject CirclePrefab; // 预制体变量&#xff0c;用于存储Circle预…

基于matlab的MTCNN(多任务卷积神经网络)人脸检测算法

关键词&#xff1a;Matlab&#xff1b;深度学习&#xff1b;多任务卷积神经网络&#xff1b;人脸检测&#xff1b; 背景 在不受约束的环境中&#xff0c;由于个体姿势的多样性、光照条件的变化以及潜在的遮挡问题&#xff0c;人脸检测和对齐任务面临诸多挑战。近期的研究表明…

ad18学习笔记22:关于keep out layer禁止布线层

ad18里的新特性&#xff0c;在 keep out层无法直接放置线条&#xff0c;需要去菜单-放置-keepout进行画线&#xff0c;如果&#xff0c;在其他层画了一个图形&#xff0c;无法直接修改这个图形的属性&#xff0c;把他变为keepout的线条&#xff0c;但是可以通过特殊粘贴操作&am…

Elasticsearch搜索引擎(高级篇)

3.1 查询语法 | 《ElasticSearch入门到实战》电子书 (chaosopen.cn) day09-Elasticsearch02 - 飞书云文档 (feishu.cn) 目录 第一章 DSL查询 1.1 基本语法 1.2 叶子查询 全文检索查询 精确查询 1.3 复合查询 算分函数查询 bool查询 1.4 排序 1.5 分页 基础分页 深度分…

numpy的基本操作

1.常用方法创建array print(np.array([1, 2, 3], dtype"f4"))# 32位浮点型 print(np.array([1.5, 2.2, 3]))# 默认浮点型 print(np.array([1, 2, 3, 4, 5], ndmin3))# 3维数组 print(np.array([range(i, i 5) for i in [1, 2, 3]]))# print(np.zeros(shape[5, …

从开源EPR产品Odoo学习

前言 一个先进、敏捷、经济高效、可快速扩展的Odoo免费开源企业信息化解决方案,让企业获得适应未来发展的长期创新和增长能力。 Odoo 的免费开源模式 让我们可利用无数开发人员和业务专家,在短短数年内,打造数百款应用。凭借强大的技术基础,Odoo 的框架是非常独特且优秀的…

RAW Sensor vs YUV Sensor:详细对比

目录 一、RAW传感器1.1 定义1.2 工作原理1.3 优点1.4 缺点1.5 应用场景二、YUV传感器2.1 定义2.2 工作原理2.3 优点2.4 缺点2.5 应用场景三、总结在现代智能手机和数码相机中,图像传感器(Image Sensor)是至关重要的组件,它决定了设备的图像捕捉能力。常见的图像传感器类型有…

LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码

LIMS&#xff08;实验室&#xff09;信息管理系统源码、有哪些应用领域&#xff1f;采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码 LIMS实验室信息管理系统&#xff0c;是一种基于计算机硬件和数据库技术&#xff0c;集多个功能模块为一体的信息管理系统。该系统主…

前后端分离对于后端来说,是利好还是利弊呢?

前后端分离已经成为前端开发的主流模式&#xff0c;这种模式极大的解放了后端&#xff0c;让后端人员不再即当爹又当妈了&#xff0c;那么这种模式对于后端来说是利好还是利弊呢&#xff0c;如何趋利避害呢&#xff0c;贝格前端工场为大家分享一下。 一、什么前后端分离的开发…

Redis的一点入门了解

Redis NoSql概述 1、单机MySQL的时代 90年代&#xff0c;一个网站的访问量一般不会太大&#xff0c;单个数据库完全足够应付&#xff0c;技术上更多的会去使用静态页面html&#xff0c;对此服务器压根没多少压力&#xff1b; 但即使在这样的情况下&#xff0c;也会存在着一些…

【Linux】程序地址空间之动态库的加载

我们先进行一个整体轮廓的了解&#xff0c;随后在深入理解细节。 在动态库加载之前还要说一下程序的加载&#xff0c;因为理解了程序的加载对动态库会有更深的理解。 轮廓&#xff1a; 首先&#xff0c;不管是程序还是动态库刚开始都是在磁盘中的&#xff0c;想要执行对应的可…

IT入门知识博客文章大纲第一部分《IT基础知识》(1/10)

目录 IT入门知识博客文章大纲第一部分《IT基础知识》&#xff08;1/10&#xff09; 1.引言 2.第一部分&#xff1a;IT基础知识 2.1 计算机硬件 CPU&#xff1a;计算机的心脏 内存&#xff1a;数据的临时居所 存储设备&#xff1a;数据的长期仓库 输入输出设备&#xff1…

PostgreSQL基础(十四):PostgreSQL的数据迁移

文章目录 PostgreSQL的数据迁移 PostgreSQL的数据迁移 PostgreSQL做数据迁移的插件非常多&#xff0c;可以从MySQL迁移到PostgreSQL也可以基于其他数据源迁移到PostgreSQL。 这种迁移的插件很多&#xff0c;这里只说一个&#xff0c;pgloader&#xff08;非常方便&#xff0…

Coursera耶鲁大学金融课程:Financial Markets 笔记Week 01

Financial Markets 本文是学习 https://www.coursera.org/learn/financial-markets-global这门课的学习笔记 这门课的老师是耶鲁大学的Robert Shiller https://en.wikipedia.org/wiki/Robert_J._Shiller Robert James Shiller (born March 29, 1946)[4] is an American econ…

SQL Server Management Studio (SSMS) 20.1 - 微软数据库管理工具

SQL Server Management Studio (SSMS) 20.1 - 微软数据库管理工具 请访问原文链接&#xff1a;https://sysin.org/blog/ssms/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 笔者注&#xff1a;SQL Server 2014 及之前版本内置…