vue3父组件传值给子组件

// 父组件
在父组件中,使用 v-bind 的缩写 : 来动态地绑定 currentSelected 到子组件的 prop。这样,当 currentSelected 的值改变时,子组件的 prop 也会自动更新。

<template><div class="filter"><selectDate :currentSelected="currentSelected"/></div>
</template>
<script lang="ts" setup>
import selectDate from "@/views/dataStatistic/children/selectDate.vue";
</script>

// 子组件
在子组件中,需要使用 props 选项来声明你期望从父组件接收哪些属性。

import { defineProps, withDefaults } from "vue";interface Props {currentSelected: string;
}
let props = withDefaults(defineProps<Props>(), {currentSelected: '',
});
// 使用
console.log(props.currentSelected)

使用对象形式来定义 prop,这样可以提供验证功能。例如,你可以指定 prop 的类型、默认值或是否必须。在上面的例子中,我们指定了 currentSelected 必须是一个字符串。

在子组件中,可以使用 watch 选项来监听 prop 的变化,并在变化时执行某些操作。但是请注意,尽量避免在子组件中直接修改prop,因为这可能会导致数据流变得混乱。如果需要在子组件中修改数据,应该使用 data 属性或 computed属性来维护一个内部状态,并根据 prop 的值来更新这个状态。

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

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

相关文章

websevere服务器从零搭建到上线(一)|阻塞、非阻塞、同步、异步

文章目录 数据准备(阻塞和非阻塞)、数据读写(同步和异步)小总结&#xff08;陈硕老师的总结&#xff09; 知识拓展同步执行实例异步编程实例 八股 数据准备(阻塞和非阻塞)、数据读写(同步和异步) 无论是什么样的IO都包含两个阶段&#xff1a;数据准备和数据读写。 我们的网络IO…

1.6 Java全栈开发前端+后端(全栈工程师进阶之路)-前置课程Jdbc编程,使用Java通过Jdbc对数据库进行基础操作

原理图 用java代码实现连接数据库&#xff08;mysql&#xff09;的操作 因为数据库连接需要使用到API和URL&#xff0c;下面简单介绍下API和URL的概念&#xff0c; API&#xff1a; Application Programming Interface应用程序编程接口&#xff0c;就是一套类库 Java中的AP…

KaiwuDB 解析器之语义解析

KaiwuDB 解析器介绍 解析器是数据库系统的重要组成部分之一&#xff0c;主要的功能是将客户端输入的 SQL 语句分解为语法单元&#xff0c;然后将这些语法单元转化成数据库内部可识别的数据结构&#xff0c;最终生成数据库可以执行的计划。 KaiwuDB 的一条 SQL 执行的整个生命…

SQL 基础 | AVG 函数的用法

在SQL中&#xff0c;AVG()是一个聚合函数&#xff0c;用来计算某个列中所有值的平均值。 它通常与GROUP BY子句一起使用&#xff0c;以便对分组后的数据进行平均值计算。 AVG()函数在需要了解数据集中某个数值列的中心趋势时非常有用。 以下是AVG()函数的一些常见用法&#xff…

Java集合排序

1. 集合排序API 1.1 集合排序概述 集合排序是指对一个集合中的元素按照特定规则进行重新排列&#xff0c;以使得集合中的元素按照预定义的顺序呈现。 在集合排序中&#xff0c;通常需要定义一个比较规则&#xff0c;这个比较规则用于决定集合中的元素在排序后的顺序。元素之间…

本地部署开源白板工具Excalidraw并结合内网穿透远程绘制流程图

文章目录 1. 安装Docker2. 使用Docker拉取Excalidraw镜像3. 创建并启动Excalidraw容器4. 本地连接测试5. 公网远程访问本地Excalidraw5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 本文主要介绍如何在Ubuntu系统使用Docker部署开源白板工具Excal…

渗透测试工具--awvs

安装 pull 这个镜像&#xff0c;注&#xff1a;内部映射端口 3443 软件页面 UserName: awvsawvs.lan PassWord: Awvsawvs.lan 或 使用以下命令无脑安装 bash <(curl -sLk https://www.fahai.org/aDisk/Awvs/check.sh) xrsec/awvs:preview 样式如下 若未成功&#xff0…

【网络原理】HTTPS 的工作过程

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】网络编程中的基本概念及Java实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 【网络…

面试集中营—Redis架构篇

一、Redis到底是多线程还是单线程 1、redis6.0版本之前的单线程&#xff0c;是指网络请求I/O与数据的读写是由一个线程完成的&#xff1b; 2、redis6.0版本升级成了多线程&#xff0c;指的是在网络请求I/O阶段应用的多线程技术&#xff1b;而键值对的读写还是由单线程完成的。所…

Java面试题:多线程1

线程和进程的区别 进程 程序由指令和数据组成 指令的运行和数据的读写依赖于将指令加载到CPU,数据加载到内存,在指令运行过程中还需要用到IO设备 进程就是用以加载指令,管理内存,管理IO的 当一个程序被运行,从磁盘加载这个程序的代码到内存,就开启了一个线程 多实例进程和…

【prometheus】Pushgateway安装和使用

目录 一、Pushgateway概述 1.1 Pushgateway简介 1.2 Pushgateway优点 1.3 pushgateway缺点 二、测试环境 三、安装测试 3.1 pushgateway安装 3.2 prometheus添加pushgateway 3.3 推送指定的数据格式到pushgateway 1.添加单条数据 2.添加复杂数据 3.SDk-prometheus-…

[Django 0-1] Core.Serializers 模块

Core.Serializers 模块 Django 序列化模块 模块结构 . ├── __init__.py ├── base.py ├── json.py ├── jsonl.py ├── python.py ├── pyyaml.py └── xml_serializer.py1 directory, 7 files自定义序列化器 通过继承django.core.serializers.base.Serial…

C语言 举例说明循环嵌套

今天 我们来说循环的嵌套 如果一个循环体内 又包含了另一个循环结构 我们称之为循环的嵌套 我们之前学的 While do-while for 都可以进行相互的嵌套 如下图 在 While 循环语句中再嵌套一个 While 循环语句 do-while 中嵌套 do-while for中嵌套 for 例如 我们做一个九九乘法…

Vue3 + Pinia + Vite5 仿抖音的项目

github地址 https://github.com/zyronon/douyin 这个项目其实在我收藏夹里好多天了&#xff0c;实在没得写了&#xff0c;简单写一下他。 官方介绍 douyin-vue 是一个模仿 抖音|TikTok 的移动端短视频项目。Vue 在移动端的"最佳实践"&#xff0c;媲美原生 App 丝…

Oracle Database 23ai 正式发布,超级巨兽(集关系型、向量、文档、图、缓存、分布式数据库一体的全能数据库)

Oracle23c改名为Oracle23ai&#xff0c;也意味着Oracle数据库正式从Cloud进入AI时代。Oracle23ai版本是一个超级巨兽&#xff0c;简单总结下&#xff1a; AI能力&#xff1a;内置向量数据库&#xff0c;内置ONNX模型数据处理&#xff0c;内置Text2SQL&#xff0c;内置的机器学习…

QT5之lambda+内存回收机制

使用lambda需要 配置c11 所以在点.pro文件里面配置添加如下 CONFIG c11 使用到qDebug 打印包含头文件 #include<QDebug> lambda 表达式使用 代替槽如下 #include "mainwidget.h" #include<QPushButton> #include<QDebug> mainWidget::mainWid…

js模块化:修改导入模块的内容,会有影响吗?

起因 element-ui的popper组件相关的层级&#xff0c;是使用popup-manager来统一管理的。 之前试图在自己的组件里导入并使用element-ui的popup-manager&#xff0c;但是层级老是和element-ui组件的层级冲突&#xff0c;看了下源码&#xff0c;竟意外发现&#xff0c;使用popu…

毕业设计参考-PyQt5-YOLOv8-鱼头鱼尾鱼长测量程序,OpenCV、Modbus通信、YOLO目标检测综合应用

“PyQt5-YOLOv8-鱼头鱼尾鱼长测量程序”是一个特定的软件程序&#xff0c;用于通过图像处理和目标检测技术来测量鱼类的长度。 视频效果&#xff1a; 【毕业设计】基于yolo算法与传统机器视觉的鱼头鱼尾识别_哔哩哔哩_bilibili 这个程序结合了多种技术&#xff1a; 1. OpenCV…

【Linux极简教程】常见实用命令不断更新中......

【Linux极简教程】常见实用命令不断更新中...... 常见问题1.Waiting for cache lock: Could not get lock /var/lib/dpkg/lock. It is held by process xxxx(dpkg) 常见问题 1.Waiting for cache lock: Could not get lock /var/lib/dpkg/lock. It is held by process xxxx(dp…

纳米体育数据足球数据接口:体彩数据包接口文档API示例②

纳米体育数据的数据接口通过JSON拉流方式获取200多个国家的体育赛事实时数据或历史数据的编程接口&#xff0c;无请求次数限制&#xff0c;可按需购买&#xff0c;接口稳定高效&#xff1b;覆盖项目包括足球、篮球、网球、电子竞技、奥运等专题、数据内容。 纳米数据API2.0版本…