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 一样

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

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

相关文章

杰发科技AC7803——不同晶振频率时钟的配置

计算公式 PLL_POSDIV [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62] PLL_PREDIV_1 1 2 4 USE_XTAL 24M SYSCLK_FREQ 64M SYSCLK_DIVIDER 1 VCO USE_XTAL*…

面向对象进阶-抽象类

抽象方法 将共性行为&#xff08;方法&#xff09;抽取到父类&#xff0c;由于每个子类执行内容不一样&#xff0c;在父类不能确定具体的方法体&#xff0c;该方法可以定义为抽象方法。 抽象类&#xff1a;如果一个类中存在抽象方法&#xff0c;那么该 类必须声明为抽象类。…

【数据结构专栏】二叉搜索树(Binary Search Tree)的剖析?

文章目录 &#x1f9e8;前言1、二叉搜索树的基本概念&#xff1f;2、二叉搜索树的节点结构组成&#xff1f;3、二叉搜索树的插入操作&#xff1f;4、二叉搜索树的删除操作&#xff1f;5、二叉搜索树的遍历&#xff1f;6、二叉搜索树的性能分析&#xff1f;&#x1f389;完整代码…

分布式调用 - 服务间的远程调用RPC

文章目录 导图PreRPC 概述RPC 调用过程RPC 动态代理1. 接口定义 (SeverProvider)2. 实现类 (ServerProviderImpl)3. 动态代理类 (DynamicProxy)4. 客户端 (Client)5. 代码工作流程6. 总结和注意点7. 结果输出8. 小结 RPC 序列化协议编码网络传输 导图 服务和应用的调用基于场景…

vue3项目搭建-4-正式启动项目,git管理

安装插件&#xff1a; npm install vue router npm install eslint 完成目录&#xff1a; 需要添置文件夹&#xff1a; apis -> api接口 composables -> 组合函数 directives -> 全局指令 styles -> 全局样式 utils -> 工具函数 git 管理&#xff1a; …

GPON原理

GPON网络架构 对于OLT来说&#xff0c;它就相当于一个指挥官&#xff0c;它指挥PON口下的ONU在指定的时间段内发送数据以及发起测距过程等 而ONU则是一个士兵&#xff0c;按照OLT的指挥做出相应 而ODN它主要就是提供一个传输通道&#xff0c;主要包括分光器和光纤组成 对于PO…

SJYP 24冬季系列 FROZEN CHARISMA发布

近日&#xff0c;女装品牌SJYP 2024年冬季系列——FROZEN CHARISMA已正式发布&#xff0c;展现了更加干练的法式风格。此次新品发布不仅延续了SJYP一贯的强烈设计风格和个性时尚&#xff0c;更融入了法式风情的干练元素&#xff0c;为消费者带来了一场视觉与穿着的双重盛宴。  …

【H2O2|全栈】JS进阶知识(十一)axios入门

目录 前言 开篇语 准备工作 获取 介绍 使用 结束语 前言 开篇语 本系列博客主要分享JavaScript的进阶语法知识&#xff0c;本期主要对axios进行基本的了解。 与基础部分的语法相比&#xff0c;ES6的语法进行了一些更加严谨的约束和优化&#xff0c;因此&#xff0c;在…

git使用文档手册

创建一个本地代码工作空间&#xff0c;比如这里使用test目录作为工作目录 针对仓库地址 http://192.168.31.125:9557/poxiaoai-crm/project-crm.git。 1. 安装 Git 确保您的系统已经安装了 Git。如果未安装&#xff0c;请根据操作系统访问 Git 官网 下载并安装。 验证安装 …

数据结构——排序算法第二幕(交换排序:冒泡排序、快速排序(三种版本) 归并排序:归并排序(分治))超详细!!!!

文章目录 前言一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本 快排1.2.2 挖坑法 快排1.2.3 lomuto前后指针 快排 二、归并排序总结 前言 继上篇学习了排序的前面两个部分:直接插入排序和选择排序 今天我们来学习排序中常用的交换排序以及非常稳定的归并排序 快排可是有多…

11.26深度学习_神经网络-数据处理

一、深度学习概述 1. 什么是深度学习 ​ 人工智能、机器学习和深度学习之间的关系&#xff1a; ​ 机器学习是实现人工智能的一种途径&#xff0c;深度学习是机器学习的子集&#xff0c;区别如下&#xff1a; ​ 传统机器学习算法依赖人工设计特征、提取特征&#xff0c;而深…

数据结构 (13)串的应用举例

前言 数据结构中的串&#xff08;String&#xff09;&#xff0c;也称为字符串&#xff0c;是一种常见且重要的数据结构&#xff0c;在计算机科学中被广泛应用于各种场景。 一、文本处理 文本编辑器&#xff1a;在文本编辑器中&#xff0c;字符串被用来表示和存储用户输入的文本…

PointNet++论文复现

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

时间的礼物:如何珍视每一刻

《时间的礼物&#xff1a;如何珍视每一刻》 夫时间者&#xff0c;宇宙之精髓&#xff0c;生命之经纬&#xff0c;悄无声息而流转不息&#xff0c;如织锦之细线&#xff0c;串联古今&#xff0c;贯穿万物。 人生短暂&#xff0c;犹如白驹过隙&#xff0c;倏忽而逝&#xff0c;…

NVIDIA /CUDA 里面的clock rate详细介绍

本文主要介绍&#xff1a; cuda中的时钟频率具体有哪些&#xff1f;clock rate怎么调节&#xff1f; cuda中可以通过nvml 函数或者命令来调整时钟频率&#xff08;clock rate&#xff09; 介绍 命令行 nvdia-smi -q -i 0 可以查询device相关参数&#xff0c;可以用后面的命…

扫振牙刷设计思路以及技术解析

市面上目前常见的就两种&#xff1a;扫振牙刷和超声波牙刷 为了防水&#xff0c;表面还涂上了一层防水漆 一开始的电池管理芯片&#xff0c;可以让充电更加均衡。 如TP4056 第一阶段以恒流充电&#xff1b;当电压达到预定值时转入第二阶段进行恒压充电&#xff0c;此时电流逐…

电磁继电器

它的控制原理很简单&#xff0c;当我们给它的线圈接电&#xff0c;这个线圈就有了磁性&#xff0c;它上面的衔铁就会被吸引&#xff0c;这样小灯泡就会点亮 继电器于MOS管的差别在于&#xff0c;继电器可以很轻松的胜任高电压、大电流的场合 我们从外壳上可以看到 30VDC&#x…

【Jenkins】自动化部署 maven 项目笔记

文章目录 前言1. Jenkins 新增 Maven 项目2. Jenkins 配置 Github 信息3. Jenkins 清理 Workspace4. Jenkins 配置 后置Shell脚本后记 前言 目标&#xff1a;自动化部署自己的github项目 过程&#xff1a;jenkins 配置、 shell 脚本积累 相关连接 Jenkins 官方 docker 指导d…

LangGraph中的State管理

本教程将介绍如何使用LangGraph库构建和测试状态图。我们将通过一系列示例代码&#xff0c;逐步解释程序的运行逻辑。 1. 基本状态图构建 首先&#xff0c;我们定义一个状态图的基本结构和节点。 定义状态类 from langgraph.graph import StateGraph, START, END from typi…

Excel的图表使用和导出准备

目的 导出Excel图表是很多软件要求的功能之一&#xff0c;那如何导出Excel图表呢&#xff1f;或者说如何使用Excel图表。 一种方法是软件生成图片&#xff0c;然后把图片写到Excel上&#xff0c;这种方式&#xff0c;因为格式种种原因&#xff0c;导出的图片不漂亮&#xff0c…