vue3 多种方式接受props,定义ref,reactive
定义props
1 第一种
interface AddType {
dialogStudyVisible: boolean;
}
const props = defineProps<AddType>();
第二种
// const props = defineProps({
// dialogStudyVisible:{
// type:Boolean,
// default:false
// }
// })
第三种
// const props = withDefaults(
// defineProps<{
//finishHandle: () => void //可以接受父节点方法
// dialogStudyVisible?:boolean
updatedHandle: (data:any) => void;
// }>(),
// {
// dialogStudyVisible:false,
//finishHandle: () => {}
updateHandle: () => {}
// }
// )
//自己业务逻辑
if(1=== 1){
props.finishHandle();
props.updateHandle(val);
}
定义ref
import { CAStep } from "../types";
export enum CAStep { plan = 1, plan = 2, }
1定义枚举类型
const step = ref<CAStep>(CAStep.plan);
2 -1定义对象类型
const columns = ref<StudyPreviewList>([]);
import { StudyPreviewList } from "@/api/interface/studyPath/index";
export interface StudyPreview{
headInfo1:{
propertyId:string,
propertyValue:string
},
stage0:{
propertyId:string,
propertyValue:string
}
}
export interface StudyPreviewList {
StudyPreviewList: StudyPreview[];
}
2-2 定义对象类型
const pList = ref<{
id: string;
name: string;
owner: number;
}[]>([]);
const planForm = reactive<{
planId: string;
address: boolean;
list: string[];
}>({
planId: '',
address: false,
list: [],
});
reactive 和 ref 一样
相关文章:
vue3 多种方式接受props,定义ref,reactive
定义props 1 第一种 interface AddType { dialogStudyVisible: boolean; } const props defineProps<AddType>(); 第二种 // const props defineProps({ // dialogStudyVisible:{ // type:Boolean, // default:false // } // }) 第三种 // const …...
逻辑处理器核心指纹修改
navigator.hardwareConcurrency的属性,可以用来获取CPU的逻辑处理器核心数。 1、navigator.hardwareConcurrency接口定义: third_party\blink\renderer\core\frame\navigator_concurrent_hardware.idl // https://html.spec.whatwg.org/C/#navigator.hardwarecon…...
如何制作项目网页
一、背景 许多论文里经常会有这样一句话Supplementary material can be found at https://hri-eu.github.io/Lami/,这个就是将论文中的内容或者补充视频放到一个网页上,以更好的展示他们的工作。因此,这里介绍下如何使用前人提供的模板制作我…...
mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?
随笔 从千万粉丝“何同学”抄袭开源项目说起,为何纯技术死路一条? 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 我们的系统应该配置哪些监控报警项? 监控报警系统如何实现自监控? java 老矣,尚能饭否ÿ…...
1、正则表达式
grep匹配 grep用来过滤文本内容,以匹配要查询的结果。 grep root /etc/passwd:匹配包含root的行 -m 数字:匹配几次后停止 -v:取反-i:忽略字符的大小写,默认的,可以不加-n:…...
Airsim安装问题:This project was made with a different version of the Unreal Engine.
本文记录如何在 Ubuntu 18.04 系统中配置 AirSim 和 Unreal Engine 4.27,并成功打开默认的 Blocks 环境项目。 环境说明 系统:Ubuntu 18.04Unreal Engine 版本:4.27AirSim:主分支文件路径: Unreal Engine:…...
java八股-分布式服务的接口幂等性如何设计?
文章目录 接口幂等token Redis分布式锁 原文视频链接:讲解的流程特别清晰,易懂,收获巨大 【新版Java面试专题视频教程,java八股文面试全套真题深度详解(含大厂高频面试真题)】 https://www.bilibili.com/…...
vscode python code runner执行乱码
打开vscode code runner插件配置,如图所示: 然后在setting.json修改运行python的默认命令: 将原来 替换成 "python":"set PYTHONIOENCODINGutf8 && python", 参考:Vscode——python环境输出中文乱…...
Java中的继承详解
在Java编程中,继承(Inheritance)是一种面向对象编程(OOP)的核心概念,它允许一个类(称为子类或派生类)继承另一个类(称为父类或基类)的属性和方法。通过继承&a…...
kafka进阶_2.存储消息
文章目录 一、存储消息介绍二、副本同步2.1、数据一致性2.2、HW在副本之间的传递 如果想了解kafka基础架构和生产者架构可以参考 kafka基础和 Kafka进阶_1.生产消息。 一、存储消息介绍 数据已经由生产者Producer发送给Kafka集群,当Kafka接收到数据后,…...
如何启用本机GPU硬件加速猿大师播放器网页同时播放多路RTSP H.265 1080P高清摄像头RTSP视频流?
目前市面上主流播放RTSP视频流的方式是用服务器转码方案,这种方案的好处是兼容性更强,可以用于不同的平台,比如:Windows、Linux或者手机端,但是缺点也很明显:延迟高、播放高清或者同时播放多路视频视频容易…...
如何更好地设计SaaS系统架构
SaaS(Software as a Service)架构设计的核心目标是满足多租户需求、支持弹性扩展和高性能,同时保持低成本和高可靠性。一个成功的SaaS系统需要兼顾技术架构、资源利用、用户体验和商业目标。本文从以下几个方面探讨如何更好地设计SaaS系统架构…...
表征对齐在训练DiT模型中的重要性
Diffusion Models专栏文章汇总:入门与实战 前言:训练过DiT模型的读者们肯定有所体会,相比于UNet模型训练难度大了很多,模型不仅很难收敛,而且非常容易训崩,其中一个很重要的原因是没有进行表征对齐…...
Qt中CMakeLists.txt解释大全
Qt从Qt5.15版本开始正式推荐使用CMake进行项目管理。 在Qt 5.15之前,虽然可以使用CMake进行构建,但Qt官方更推荐使用qmake。 然而,从Qt5.15开始,Qt官方正式推荐使用CMake作为主要的构建系统,并在Qt 6中进一步加强了…...
【在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: ‘module‘ object is not callable】
在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: module object is not callable 在进行深度学习模型训练时,尤其是在处理大规模数据时,实时了解训练过程中的进展是非常重要的。为了实现这一点,我们可以使用 tq…...
数据结构-堆的实现和应用
目录 1.堆的概念 2.堆的构建 3.堆的实现 4.堆的功能实现 4.1堆的初始化 4.2堆的销毁 4.3堆的插入 4.3.1向上调整 4.4堆的删除 4.4.1向下调整法 编辑4.5取堆顶 5. 向上调整法和向下调整法比较 6.堆的应用 6.1TOP-K问题 6.2TOP-K思路 6.2.1用前n个数据来建堆 6.…...
数据分析的尽头是web APP?
数据分析的尽头是web APP? 在做了一些数据分析的项目,也制作了一些数据分析相关的web APP之后,总结自己的一些想法和大家分享。 1.web APP是呈现数据分析结果的另外一种形式。 数据分析常见的结果是数据分析报告,可以是PPT或者…...
YOLO系列论文综述(从YOLOv1到YOLOv11)【第3篇:YOLOv1——YOLO的开山之作】
YOLOv1 1 摘要2 YOLO: You Only Look Once2.1 如何工作2.2 网络架构2.3 训练2.4 优缺点 YOLO系列博文: 【第1篇:概述物体检测算法发展史、YOLO应用领域、评价指标和NMS】【第2篇:YOLO系列论文、代码和主要优缺点汇总】 ——————————…...
容器和它的隔离机制
什么是容器和它的隔离机制? 容器 是一种轻量化的虚拟化技术,它允许多个应用程序共享同一个操作系统(OS)内核,同时为每个应用程序提供自己的运行环境。容器通过利用 Linux 的内核功能(如 Namespaces 和 Cgr…...
【数据结构与算法】排序算法总结:冒泡 / 快排 / 直接插入 / 希尔 / 简单选择 / 堆排序 / 归并排序
1 排序 1.1 冒泡 内排序的交换排序类别 1.1.1 普通实现 public class BubbleSort {/*** 基本的 冒泡排序*/public static void bubbleSort(int[] srcArray) {int i,j; // 用于存放数组下标int temp 0; // 用于交换数值时临时存放值for(i0;i<srcArray.length-1;i){// j …...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
掌握 HTTP 请求:理解 cURL GET 语法
cURL 是一个强大的命令行工具,用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中,cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...
