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

Vue3 + TypeScript，使用祖先传后代模式重构父传子模式

news 来源：原创 2025/8/2 12:55:55

父传子模式

父组件 SampleInput.vue

<script setup lang="ts" name="SampleInput">
import { ref } from "vue";
import type { ApplyBasicInfo, Apply, ApplySample } from "@/interface";
import CommonApplySampleTable from "@/components/common/CommonApplySampleTable.vue";// 定义数据
// 受理基础信息
const applyBasicInfo = ref<ApplyBasicInfo | null>(null)
// 受理样品表格数据
const applySampleTableData = ref<ApplySample[]>([]);
// 滚动到离顶部表头的距离
const applySampleTableScrollTop = ref(0);......</script><template><!-- 提供数据给子类 --><CommonApplySampleTable:apply-sample-list="applySampleTableData":accept-type="applyBasicInfo.acceptType":scroll-top="applySampleTableScrollTop"operate-command-type="info-add" />
</template>

子组件 CommonApplySampleTable.vue

<script setup lang="ts" name="CommonApplySampleTable">
import type { ApplySample } from "@/interface";
import ApplySampleSZTable from "@/components/ApplySampleSZTable.vue";
import ApplySampleOtherTable from "@/components/ApplySampleOtherTable.vue";// 接收父类提供的数据
const props = withDefaults(defineProps<{// 受理样品列表applySampleList: ApplySample[];// 受理类别acceptType: string;// 操作指令类型：新增删除：info-add；修改：info-modify；查看：info-viewoperateCommandType: "info-add" | "info-modify" | "info-view";// 滚动到离顶部表头的距离scrollTop?: number;}>(),{applySampleList: () => [],acceptType: "",operateCommandType: "info-add",scrollTop: 0}
);
</script><template><!-- 受理样品表格，水质类 --><ApplySampleSZTablev-if="props.acceptType.includes(`GD`)":applySampleData="props.applySampleList":applySampleTableScrollTop="props.scrollTop":operate-command-type="props.operateCommandType" /><!-- 受理样品表格，其他 --><ApplySampleOtherTablev-else:applySampleData="props.applySampleList":applySampleTableScrollTop="props.scrollTop":operate-command-type="props.operateCommandType" />
</template><style scoped lang="scss"></style>

祖先传后代模式

父组件 SampleInput.vue

<script setup lang="ts" name="SampleInput">
import { ref, provide, computed } from "vue";
import type { ApplyBasicInfo, Apply, ApplySample } from "@/interface";
import CommonApplySampleTable from "@/components/common/CommonApplySampleTable.vue";// 定义数据
// 受理基础信息
const applyBasicInfo = ref<ApplyBasicInfo | null>(null)
// 受理样品表格数据
const applySampleTableData = ref<ApplySample[]>([]);
// 滚动到离顶部表头的距离
const applySampleTableScrollTop = ref(0);......// 提供数据给后代
// 受理样品列表
provide("applySampleList", applySampleTableData); // applySampleTableData是个Ref对象，不需要.value，传递ref对象本身（响应式数据）
// 受理类别
provide("acceptType",computed(() => applyBasicInfo.value.acceptType) // applyBasicInfo.value.acceptType 是派生数据（属性数据），通过computed提供响应式数据
);
// 操作指令类型：新增删除：info-add；修改：info-modify；查看：info-view
provide("operateCommandType", ref("info-add"));
// 滚动到离顶部表头的距离
provide("scrollTop", applySampleTableScrollTop); // applySampleTableScrollTop是个Ref对象，不需要.value，传递ref对象本身（响应式数据）
</script><template><CommonApplySampleTable />
</template>

子组件 CommonApplySampleTable.vue

<script setup lang="ts" name="CommonApplySampleTable">
import type { ApplySample } from "@/interface";
import ApplySampleSZTable from "@/components/ApplySampleSZTable.vue";
import ApplySampleOtherTable from "@/components/ApplySampleOtherTable.vue";
import { inject, type Ref, ref } from "vue";// 接收祖先提供的数据
// 受理样品列表
const applySampleList = inject<Ref<ApplySample[]>>("applySampleList", ref([]));
// 受理类别
const acceptType = inject<Ref<string>>("acceptType", ref(""));
// 操作指令类型：新增删除：info-add；修改：info-modify；查看：info-view
const operateCommandType = inject<Ref<"info-add" | "info-modify" | "info-view">>("operateCommandType", ref("info-add"));
// 滚动到离顶部表头的距离
const scrollTop = inject<Ref<number>>("scrollTop", ref(0));
</script><template><!-- 受理样品表格，水质类 --><ApplySampleSZTablev-if="acceptType.includes(`GD`)":applySampleData="applySampleList":applySampleTableScrollTop="scrollTop":operate-command-type="operateCommandType" /><!-- 受理样品表格，其他 --><ApplySampleOtherTablev-else:applySampleData="applySampleList":applySampleTableScrollTop="scrollTop":operate-command-type="operateCommandType" />
</template><style scoped lang="scss"></style>

Vue3 + TypeScript，使用祖先传后代模式重构父传子模式

父传子模式父组件 SampleInput.vue <script setup lang"ts" name"SampleInput"> import { ref } from "vue"; import type { ApplyBasicInfo, Apply, ApplySample } from "/interface"; import CommonApplySampleTable from …...

编程日记 2025/8/2 12:55:55

MySQL：9.表的内连和外连

9.表的内连和外连表的连接分为内连和外连 9.1 内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选，之前查询都是内连接，也是在开发过程中使用的最多的连接查询。语法： select 字段 from 表1 inner join 表2 on 连接…...

编程日记 2025/7/28 10:41:02

(mac)Grafana监控系统之监控Linux的Redis

Grafana安装-CSDN博客普罗米修斯Prometheus监控安装（mac）-CSDN博客 1.Redis_exporter安装直接下载 wget https://github.com/oliver006/redis_exporter/releases/download/v1.0.3/redis_exporter-v1.0.3.linux-amd64.tar.gz 解压 tar -xvf redis_…...

编程日记 2025/8/1 18:47:50

Multisim使用教程详尽版--(2025最新版)

一、Multisim14前言 1.1、主流电路仿真软件 1. Multisim：NI开发的SPICE标准仿真工具，支持模拟/数字电路混合仿真，内置丰富的元件库和虚拟仪器（示波器、频谱仪等），适合教学和竞赛设计。官网：艾…...

编程日记 2025/7/28 10:40:58

python pdf转图片再OCR

先pdf转图片 import os from pdf2image import convert_from_path# PDF文件路径 pdf_path /Users/xxx/2022.pdf # 输出图片的文件夹 output_folder ./output_images2022 # 输出图片的命名格式 output_name page# 如果输出文件夹不存在，创建它 if not os.path.ex…...

编程日记 2025/7/28 10:40:56

npm link 使用指南

npm link 使用指南 npm link 是一个非常有用的命令，主要用于在开发过程中将本地 npm 包链接到全局 npm 目录，从而可以在其他项目中使用这个本地包，而不需要发布到 npm 仓库。基本用法 1. 创建全局链接进入你要链接的本地包的根目录&…...

编程日记 2025/8/1 14:36:21

免费图片软件,可矫正倾斜、调整去底效果

软件介绍有个超棒的软件要给大家介绍一下哦，它就是——ImgTool，能实现图片漂白去底的功能，而且重点是，它是完全免费使用的呢，功能超强大！ 软件特点及使用便捷性这软件是绿色版本的哟，就像一…...

编程日记 2025/7/28 12:53:03

5G网络切片：精准分配资源，提升网络效率的关键技术

5G网络切片：精准分配资源，提升网络效率的关键技术随着5G技术的广泛应用，网络切片（Network Slicing）作为其核心创新之一，正在改变传统网络架构。它通过将物理网络划分为多个逻辑网络（切片&…...

编程日记 2025/7/28 22:44:34

seate TCC模式案例

场景描述用户下单时，需要创建订单并从用户账户中扣除相应的余额。如果订单创建成功但余额划扣失败，则需要回滚订单创建操作。使用 Seata 的 TCC 模式来保证分布式事务的一致性。 1. 项目结构假设我们有两个微服务： Order Service&#x…...

编程日记 2025/8/2 11:24:56

Transfomer的本质

Transformer是一个基于自注意力机制的深度学习模型，用于处理序列数据，主要结构包括编码器和解码器，每个部分由多头自注意力和前馈网络组成，加上残差连接和层归一化，以及位置编码。它解决了RNN的并行处理问题&#xff0…...

编程日记 2025/7/30 7:55:55

final修饰变量的注意

在Java中，使用final修饰变量时，需注意以下关键事项： 1. 初始化规则实例变量： 必须在声明时、构造器或实例初始化块中初始化。所有构造器分支必须保证初始化。 class Example {final int x; // 实例变量final int y;public Exampl…...

编程日记 2025/7/31 8:30:13

前端与传统接口的桥梁：JSONP解决方案

1.JSONP原理 1.1.动态脚本注入说明：通过创建 <script> 标签绕过浏览器同源策略 1.2.回调约定说明：服务端返回函数名(JSON数据) 格式的JS代码 1.3.自动执行说明：浏览器加载脚本后立即触发前端预定义的回调函数（现代开…...

编程日记 2025/8/1 6:54:13

SQL注入 01

0x01 用户、脚本、数据库之间的关系首先客户端发出了ID36的请求，脚本引擎收到后将ID36的请求先代入脚本的sql查询语句Select * from A where id 36 ， 然后将此代入到数据库中进行查询，查到后将返回查询到的所有记录给脚本引擎，接…...

编程日记 2025/7/31 20:17:49

Java之封装（学习笔记）

封装定义（个人理解：） 封装就像电视遥控器的按钮，比如音量键，对于我们使用者来说就是可以直接按下去调控音量，对于代码写作者来说就是封装了调控音量的方法，使得我们只能去调控，不能改…...

编程日记 2025/7/28 10:40:36

每天学一个 Linux 命令（27）：head

可访问网站查看，视觉品味拉满： http://www.616vip.cn/27/index.html head 是 Linux 中用于查看文件开头部分内容的命令，默认显示文件前 10 行，适合快速预览文件结构或日志头部信息。命令格式 head [选项] [文件]常用选项选项说明-n <行数>指定显示前 N 行（如…...

编程日记 2025/7/31 8:27:01

山东大学软件学院创新项目实训开发日志（20）之中医知识问答自动生成对话标题bug修改

在原代码中存在一个bug：当前对话的标题不是现有对话的用户的第一段的前几个字，而是历史对话的第一段的前几个字。这是生成标题的逻辑出了错误： 当改成size()-1即可...

编程日记 2025/7/28 10:40:29

论文阅读：2024 ICML Is DPO Superior to PPO for LLM Alignment? A Comprehensive Study

Is DPO Superior to PPO for LLM Alignment? A Comprehensive Study https://www.doubao.com/chat/3506902534329346 https://arxiv.org/pdf/2404.10719 速览这篇论文主要探讨了大语言模型对齐中两种主流方法——**DPO（直接偏好优化）和PPO&#xf…...

编程日记 2025/7/30 15:52:19

2025年人工智能指数报告：技术突破与社会变革的全景透视

《2025年人工智能指数报告》作为斯坦福大学人工智能实验室与多方合作的年度重磅研究，以超过千页的篇幅全景式展现了人工智能技术在全球范围内的发展轨迹与深远影响。这份报告不仅延续了对AI技术性能、科研进展与产业应用的追踪，更首次深入探讨了AI硬件的…...

编程日记 2025/7/30 18:56:12

【Python笔记 01】变量、标识符

一、变量 1、变量的作用计算机存储空间，用于保存数据。 2、定义变量的格式格式：变量名值示例： num1 3 # num1就是一个变量，保存蛋糕的价格 num2 10 #num2也是一个变量，保存雪碧的价格 total num1 num2 …...

编程日记 2025/8/1 18:35:16

WebSocket启用备忘

一：引入依赖： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org…...

编程日记 2025/7/28 10:40:20

文件管理详解（曼波脑图版）

(✪ω✪)曼波来啦！文件管理的知识曼波这就为你详细讲解哟~ 记得要准备好小本本做笔记哦！(๑˃̵ᴗ˂̵)و 🌟 文件读写操作 🌟 // 最可爱的文件读取写法 (✧∇✧) try (BufferedReader reader new BufferedReader(new FileRead…...

编程日记 2025/7/27 19:59:04

学习笔记十九——Rust多态

🧩 Rust 多态终极通俗指南 📚 目录导航多态一句话概念静态分派 vs 动态分派——根本差异参数化多态（泛型） 3.1 函数里的泛型 3.2 结构体里的泛型 3.3 方法里的泛型 3.4 枚举里的泛型Ad hoc 多态（特例多态&#xff0…...

编程日记 2025/8/1 20:43:41

在 Linux 上部署 .NET Core 应用并配置为开机自动启动

在本文中，我们将详细介绍如何在 Linux 系统上部署 .NET Core 应用程序，并配置为开机自动启动。以下是一步一步的详细部署过程，适用于将 .NET Core Web 应用部署到生产环境中。 1. 安装 .NET 运行时和 SDK 首先，确保 Linux 系统上…...

编程日记 2025/7/27 13:28:41

dubbo SPI插件扩展点使用

参考：SPI插件扩展点 Dubbo SPI概述使用IoC容器帮助管理组件的生命周期、依赖关系注入等是很多开发框架的常用设计，Dubbo中内置了一个轻量版本的IoC容器，用来管理框架内部的插件，实现包括插件实例化、生命周期、依赖关系自动注入…...

编程日记 2025/8/2 9:22:40

P8512 [Ynoi Easy Round 2021] TEST_152 Solution

Description 有一序列 c ( c 1 , c 2 , ⋯ , c m ) c(c_1,c_2,\cdots,c_m) c(c1,c2,⋯,cm) 和 n n n 个三元组 ( l i , r i , v i ) (l_i,r_i,v_i) (li,ri,vi). 回答 q q q 次形如 ( L , R ) (L,R) (L,R) 的询问，具体如下： 将 c c …...

编程日记 2025/8/2 10:31:53

开源项目FastAPI-MCP：一键API转换MCP服务

在当今AI开发的世界中，应用程序与AI模型之间的无缝集成至关重要。模型上下文协议(Model Context Protocol, MCP)通过允许AI模型访问外部工具和数据源，弥合了这一差距。 FastAPI MCP是一个强大的工具，它可以通过最少的配置将您现有的FastAPI端点转换为MCP兼容的工具。本…...

编程日记 2025/7/31 11:57:34

8、constexpr if、inline、类模版参数推导、lambda的this捕获---c++17

一、constexpr if：编译时条件分支作用：在模板编程中，根据条件在编译时选择不同的代码路径，无需特化版本或复杂SFINAE技巧[替代SFINAE]。[SFINAE将在模版元编程再讲。下个月了。]基本语法 if constexpr (condition) {// 如果 co…...

编程日记 2025/7/28 10:40:07

github新建一个远程仓库并添加了README.md，本地git仓库无法push

1.本地git仓库与远程仓库绑定 2.push时报错，本地的 main 分支落后于远程仓库的 main 分支（即远程有更新，但你本地没有），需要拉取远程的仓库--->在merge合并（解决冲突）--->push 3.但是git …...

编程日记 2025/7/30 15:36:08

贝叶斯分类器：原理、算法与应用详解

内容摘要本文聚焦贝叶斯分类器，介绍其在各类分类器中分类错误概率最小的特性。详细阐述贝叶斯分类器的基本原理、朴素贝叶斯和半朴素贝叶斯分类器的算法，结合西瓜数据集实例说明朴素贝叶斯的应用。此外，还深入探讨极大似然估计和贝叶斯估计…...

编程日记 2025/8/1 1:48:27

算法篇之单调栈

单调栈算法入门单调栈是一种特殊的数据结构应用，它的核心在于维护一个栈，使得栈内元素保持单调递增或者单调递减的顺序。这种数据结构在解决很多算法问题时非常有效，例如求数组中每个元素的下一个更大元素、每日温度问题等。一、单调栈的…...

编程日记 2025/7/27 21:31:42

用python + PIL 实现图片格式转换工具

用python PIL 实现图片格式转换工具要运行该程序，需要使用第三方库PIL（pillow），详情可见https://blog.csdn.net/cnds123/article/details/126141838 格式支持： 支持常见图片格式转换（JPEG, PNG, BMP, GIF…...

编程日记 2025/7/31 12:53:43

【数据库】事务

目录 1. 什么是事务？ 2. 事务的ACID特性 3. 为什么使用事务？ 4. 如何使用事务 4.1 查看支持事务的存储引擎 4.2 语法 4.3 保存点 4.4 自动/手动提交事务 5. 事物的隔离性和隔离级别 5.1 什么是隔离性 5.2 隔离级别 5.3 查看和设置隔离级别 1…...

编程日记 2025/7/28 10:39:58

C++:详解命名空间

目录前言一、命名空间是什么？ 1.1命名空间域的定义二、为什么有命名空间？ 三、命名空间的用法总结前言主要讲解命名空间是什么？为什么有命名空间？以及它的用法一、命名空间是什么？ 命名空间域（nam…...

编程日记 2025/7/30 8:57:25

ClickHouse核心架构设计

列式存储原理与数据压缩列式存储原理列式存储 vs 行式存储特性行式存储（如MySQL）列式存储（ClickHouse）数据排列按行连续存储（所有字段相邻）按列连续存储（单列数据紧密排列）适用场…...

编程日记 2025/7/28 10:39:52

K8s-Pod详解

Pod介绍 Pod是Kubernetes中能够创建和部署的最小单元，是Kubernetes集群中的一个应用实例，总是部署在同一个节点Node上。（程序运行部署在容器中，容器必须存在pod中。pod可以认为是容器的封装，一个pod中可以存在一个或者…...

编程日记 2025/7/31 18:20:11

SSM（SpringMVC+spring+mybatis）整合的步骤以及相关依赖

目录 （一）导入SSM框架相关的依赖 ①创建一个新的web工程（idea2023版） ②思考三者之间的联系，回忆依赖 ③在pom.xml文件中引入依赖坐标 （二）使用注解开发，编写Spring的配置类&am…...

编程日记 2025/7/31 23:46:08

【LeetCode】算法详解#5 ---轮转数组

1.题目介绍给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。 1 < nums.length < 105-231 < nums[i] < 231 - 10 < k < 105 2.解决思路这道题的解决方法有很多，我这里给大家介绍我使用的方法。…...

编程日记 2025/8/1 5:38:16

LeetCode 打家劫舍+删除并获得点数

题目描述打家劫舍题目传送门1 删除并获得点数传送门2 思路这两道题看似毫无关系，但竟然可以用桶数组联系起来！！ 先说打家劫舍这道题限制条件是不能走相邻的屋，再联想到跳台阶（走一格或两格）&#x…...

编程日记 2025/7/27 16:48:14

【计量地理学】实验四主成分分析与莫兰指数

一、实验内容 （一） 某地区35个城市2004年的7项经济统计指标数据见（数据中的“题目1”sheet）。 （1）试用最短距离聚类法对35个城市综合实力进行系统聚类分析，并画出聚类谱系图: 在此次实验内容…...

编程日记 2025/8/2 2:01:54

TDengine 性能监控与调优实战指南（二）

四、TDengine 性能调优实战 4.1 硬件层面优化硬件是 TDengine 运行的基础，其性能直接影响着 TDengine 的整体表现。在硬件层面进行优化，就如同为高楼大厦打下坚实的地基，能够为 TDengine 的高效运行提供有力支持。 CPU：CPU 作…...

编程日记 2025/7/30 19:13:23

Linux `init 5` 相关命令的完整使用指南

Linux init 5 相关命令的完整使用指南—目录一、init 系统简介二、init 5 的含义与作用三、不同 Init 系统下的 init 5 行为1. SysVinit（如 CentOS 6、Debian 7）2. systemd（如 CentOS 7、Ubuntu 16.04）3. Upstart（如 …...

编程日记 2025/8/1 18:08:23

uni-app中map的使用

uni-app中map的使用一、基本使用步骤 1. 引入 map 组件在 .vue 文件的 template 中直接使用 <map> 标签： <template><view><map :latitude"latitude" :longitude"longitude" :markers"markers" style&quo…...

编程日记 2025/7/28 4:19:08

备战2025年全国信息素养大赛图形化大赛——绘制雪花

以上题目点击下方地址，可查看答案或者在线编程～ 绘制雪花_scratch_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/scratch/show-5775.html?_shareid3 程序演示可点击下方地址，支持源码和素材获取，方便高效&#xff…...

编程日记 2025/7/31 12:53:39

1Panel - 基于Web的Linux服务器管理工具

本文翻译整理自：https://github.com/1Panel-dev/1Panel 文章目录一、关于 1Panel相关链接资源关键功能特性二、安装系统要求安装脚本三、基本使用（快速开始）1、快速安装2、访问面板四、界面展示五、专业版六、安全信息感谢一、关于 1Pan…...

编程日记 2025/7/29 23:12:11

基于SpringAI Alibaba实现RAG架构的深度解析与实践指南

一、RAG技术概述 1.1 什么是RAG技术 RAG（Retrieval-Augmented Generation）检索增强生成是一种将信息检索技术与生成式AI相结合的创新架构。它通过以下方式实现智能化内容生成： 知识检索阶段：从结构化/非结构化数据源中检索相关…...

编程日记 2025/8/2 3:03:41

SpringBoot Actuator指标收集：Micrometer与Prometheus集成

文章目录引言一、Spring Boot Actuator基础二、Micrometer简介与集成三、基本指标收集与配置四、自定义业务指标实现五、与Prometheus集成六、实战案例：API性能监控总结引言在现代微服务架构中，监控应用程序的健康状况和性能指标变得至关重要。Sprin…...

编程日记 2025/7/28 13:05:38

Spring Boot 集成 Kafka 及实战技巧总结

Spring Boot 集成 Kafka 及实战技巧总结一、Spring Boot 集成 Kafka 添加依赖 <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId> </dependency>配置 Kafka 在 application.yml 中配置生产…...

编程日记 2025/8/1 9:16:09

LeetCode hot 100—分割等和子集

题目给你一个只包含正整数的非空数组 nums 。请你判断是否可以将这个数组分割成两个子集，使得两个子集的元素和相等。示例示例 1： 输入：nums [1,5,11,5] 输出：true 解释：数组可以分割成 [1, 5, 5] 和 [11] 。…...

编程日记 2025/8/1 21:41:08

JUC复习及面试题学习

资源来自沉默王二、小林coding、竹子爱熊猫、代码随想录一、JUC 1、进程与线程进程是对运行程序的封装，是系统进行资源调度和分配的最小单位。线程是进程的子任务，是CPU调度分配的基本单位不同的进程之间很难数据共享，同进程下的不同线…...

编程日记 2025/7/28 11:41:45

The_Planets_Earth靶场笔记（VulnHub）

环境说明： kali地址：192.168.144.128 靶机地址：192.168.144.181 靶机网卡改为NAT模式。靶机下载地址： https://download.vulnhub.com/theplanets/Earth.ova 一.信息收集： 1.主机探测： 使用如下命令…...

编程日记 2025/7/28 13:05:29

父传子模式

祖先传后代模式

相关文章：