当前位置: 首页 > news >正文

Vue3 父子组件数据传递

1、父组件向子组件传递数据

1.1、传递多个简单变量给到子组件

父组件使用

  <TitleView title="标题" :name="name" :isCollect="isCollect" @collect-event="collectEvent" /><script setup>const name = ref('名字')const isCollect = ref(true)</script>

子组件接收并且向外暴露一个方法

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'const props = defineProps<{ title: string; name: string; isCollect: boolean }>()
const emits = defineEmits(['collectEvent'])
const isCollectRef = ref(props.isCollect)function doCollect() {isCollectRef.value = !isCollectRef.valueemits('collectEvent', isCollectRef.value)
}
</script>

1.2、传递对象给到子组件

父组件传递

<IndicatorDetail :detail="detailIndex"/>
<script setup>
const detailIndex = reactive([{text:'未知',title:'X',color:'green'
},{text:'未知',title:'Y',color:'blue'
},{text:'2023-08-13',title:'Z',color:'grey'
}])
</script>

子组件直接通过props接收

<script>
export default {props: ['detail'],setup(props) {}
}
</script>
或者
<script setup>
const props = defineProps({detail: {type: Object,default: () => {return {}}}
})
</script>

相关文章:

Vue3 父子组件数据传递

1、父组件向子组件传递数据 1.1、传递多个简单变量给到子组件 父组件使用 <TitleView title"标题" :name"name" :isCollect"isCollect" collect-event"collectEvent" /><script setup>const name ref(名字)const isCol…...

Eureka:集群环境配置

创建三个集群 导包 <!-- 导包--><dependencies><!-- Eureka -server --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka-server</artifactId><version>1.…...

springboot之多数据源配置

文章目录 一、多数据源的典型使用场景1 业务复杂&#xff08;数据量大&#xff09;2 读写分离 二、如何实现多数据源通过AbstractRoutingDataSource动态指定数据源多数据源切换方式AOPMyBatis插件 三、spring集成多个Mybatis框架 实现多数据源控制四、dynamic-datasource 多数据…...

无涯教程-PHP - 静态变量函数

静态变量 静态变量在函数退出时值不会丢失,您只需将关键字STATIC放在变量名称的前面,即可将变量声明为静态变量。 <?phpfunction keep_track() {STATIC $count0;$count;print $count;print "<br />";}keep_track();keep_track();keep_track(); ?> 这…...

2023-08-20力扣今日二题

链接&#xff1a; 1312. 让字符串成为回文串的最少插入次数 题意&#xff1a; 如题 解&#xff1a; 动态规划&#xff0c;枚举回文串中点并递增回文串长度 初始状态若LR则单个字符为中点&#xff0c;需要添加0个字符成为回文串&#xff1b;若L1R则如果S[L]S[R]则需要添加…...

【地理专题】2023年最新全国A级景区数

数据来源&#xff1a;中国文化和旅游部时间跨度&#xff1a;2023年区域范围&#xff1a;全国范围数据字段&#xff1a; 景区名称&#xff1b;地址&#xff1b;等级&#xff1b;城市&#xff1b;经度&#xff1b;纬度 该图基于自然资源部地图技术审查中心标准地图服务网站下载…...

Elasticsearch实战(一):Springboot实现Elasticsearch统一检索功能

文章目录 系列文章索引一、准备工作1、搭建docker环境2、安装eskibana3、es安装ik分词器&#xff08;1&#xff09;下载安装&#xff08;2&#xff09;测试 4、Springboot&#xff08;1&#xff09;引包&#xff08;2&#xff09;客户端公共方法&#xff08;3&#xff09;公共实…...

更改计算机睡眠时间

控制面板–>系统和安全–>电源选项下的更改计算机睡眠时间 如果关闭显示器时间小于使计算机进入睡眠状态时间&#xff0c;时间先到达关闭显示器时间&#xff0c;显示器关闭&#xff0c;这时电脑还在正常工作状态。如果此时敲击键盘显示器出现画面&#xff0c;无需输入密…...

Matplotlib数据可视化(一)

目录 1.Matplotlib简介 2.Matplotlib绘图基础 2.1 创建画布与子图 2.2 添加画布属性 2.3 绘图的保存与显示 1.Matplotlib简介 Matplotlib是一个用于绘制数据可视化图表的Python库。它提供了广泛的功能和灵活性&#xff0c;可以创建各种类型的图表&#xff0c;包括折线图、…...

LLM提示词工程和提示词工程师Prompting and prompt engineering

你输入模型的文本被称为提示&#xff0c;生成文本的行为被称为推断&#xff0c;输出文本被称为完成。用于提示的文本或可用的内存的全部量被称为上下文窗口。尽管这里的示例显示模型表现良好&#xff0c;但你经常会遇到模型在第一次尝试时无法产生你想要的结果的情况。你可能需…...

Python开发环境(Visual Studio Code、Anaconda、PyInstaller、Enigma Virtual Box)

Python开发环境 [Anaconda、PyInstaller、Enigma Virtual Box] AnacondaAnaconda安装搭建Python环境Anaconda命令 Visual Studio CodeVisual Studio Code中Python设置Visual Studio Code中使用Qt Designer Python打包发布.exe可执行文件PyinstallerEnigma Virtual Box Anaconda…...

Unreal Engine 测试总结

Android 项目打包应选择哪种纹理格式&#xff1f;打包模式区别&#xff1f; 根据官网文档介绍&#xff0c;建议使用 ETC2&#xff1a;所有OpenGL 3.x 类型的设备都支持&#xff0c;并且支持alpha压缩 打包模式包括&#xff1a;内部测试阶段的开发模式&#xff0c;对外发布的发行…...

Air780EG —— 合宙4G定位解决方案

定位模式&#xff1a; 外部单片机控制模式(常见于AT固件客户)&#xff1a; 开机 -> 搜星 -> 定位成功 -> 上报 -> 关机 780E自行控制模式(常见于二次开发客户&#xff0c;AT用户也可以使用): 开机 -> 搜星 -> 定位成功 -> 模块休眠&#xff0c;关闭GP…...

【算法刷题之数组篇(2)】

目录 1.leetcode-35. 搜索插入位置&#xff08;简单&#xff09;2.leetcode-74. 搜索二维矩阵&#xff08;中等&#xff09;3.leetcode-73. 矩阵置零&#xff08;中等&#xff09;4.leetcode-56. 合并区间&#xff08;中等&#xff09;5.leetcode-54. 螺旋矩阵&#xff08;中等…...

chromedriver.exe 的所有版本下载地址

Chrome for Testing availability 上面的网址是V115 v116.... 以上的。 CNPM Binaries Mirror 上面这个是V115版本以下的。 这个文章没有任何实际价值&#xff0c;记录的原因是因为突然发现过去的py无法运行&#xff0c;原因是chrome浏览器偷偷升级到V115&#xff0c;于是找…...

C++ 网络编程项目fastDFS分布式文件系统(四)-fastCGI项目相关技术以及linux搜狗输入法相关问题。

目录 1. Nginx作为web服务器处理请求 2. http协议复习 Get方式提交数据 Post方式提交数据 3. fastCGI 3.1 CGI 3.2 fastCGI 3.3 fastCGI和spawn-fcgi安装 1. 安装fastCGI 2. 安装spawn-fcgi 3.4 nginx && fastcgi 4其他知识点 1. fastCGI环境变量 - fas…...

【HarmonyOS】服务卡片 API6 JSUI跳转不同页面

【引言】 “JS卡片支持为组件设置action&#xff0c;包括router事件和message事件&#xff0c;其中router事件用于应用跳。若设置router事件&#xff0c;则action属性值为"router"&#xff1b;abilityName为卡片提供方应用的跳转目标Ability名&#xff1b;params中的…...

【linux】debian10安装vim

debian10.0上用apt vim安装vim提示依赖的版本冲突。后来发现是软件源没有添加更新源buster-updates。 以下是问答。 问&#xff1a;debian10怎么安装vim? 答&#xff1a; 在 Debian 10 系统上安装 Vim 的方法很简单,主要有以下两种: 1. 使用 apt 命令安装 bash sudo apt u…...

文件同步工具rsync

文章目录 作用特性安装命令服务端启动增加安全认证及免密登录 实时推送源服务器配置结合inotify实现实时推送 参数详解 学些过程中遇到的问题 作用 rsync是linux系统下的数据镜像备份工具。使用快速增量备份工具Remote Sync可以远程同步&#xff0c;支持本地复制&#xff0c;或…...

【嵌入式开发 Linux 常用命令系列 12 -- linux 下 log 输出重定向 详细介绍 】

文章目录 Linux 输出重定向使用背景Linux 重定向使用介绍 上篇文章&#xff1a;嵌入式开发 Linux 常用命令系列 11 – linux 下 任务与CPU绑定命令 taskset 详细介绍 Linux 输出重定向使用背景 在Linux中&#xff0c;输入和输出重定向是非常常见的操作&#xff0c;它们可以用…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...