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

vue3 父组件调用子组件 el-drawer 抽屉

news 来源：原创 2025/6/20 4:14:36

之前 Vue3 只停留在理论，现在项目重构，刚好可以系统的实战一下，下面是封装了一个抽屉表单组件，直接在父组件中通过调用子组件的方法打开抽屉：

父组件：

<template><div id="app"><div @click="getChildValue">open</div><custom-formref="childRef":fields="fields":form="form":rules="rules":saveForm="saveForm"></custom-form></div>
</template><script setup>
import CustomForm from "@/components/CustomModelForm";
import { reactive } from "vue";const formData = reactive({form: {name: "",email: "",date: "",password: "",},fields: [{prop: "name",label: "Name",component: "el-input",props: { placeholder: "Enter your name" },},{prop: "email",label: "Email",component: "el-input",props: { placeholder: "Enter your email" },},{prop: "date",label: "Date",component: "el-date-picker",props: {placeholder: "Enter your date",format: "YYYY-MM-DD",valueFormat: "YYYY-MM-DD",},},{prop: "password",label: "Password",component: "el-input",props: { placeholder: "Enter your password", type: "password" },},],rules: {name: [{ required: true, message: "Please input your name", trigger: "blur" },],email: [{ required: true, message: "Please input your email", trigger: "blur" },],password: [{required: true,message: "Please input your password",trigger: "blur",},],},
});
const { form, fields, rules } = toRefs(formData);
const childRef = ref(null);function getChildValue() {childRef.value?.open();
}function saveForm() {console.log(form.value);
}
</script>

子组件：

<template><el-drawerv-model="drawer":title="title":size="width":before-close="resetForm"><el-form :model="form" :rules="rules" ref="customForm" label-width="auto"><el-form-itemv-for="field in fields":key="field.prop":label="field.label":prop="field.prop"><component:is="field.component"v-bind="field.props"v-model="form[field.prop]"/></el-form-item></el-form><template #footer><div style="flex: auto"><el-button type="primary" @click="submitForm">保存</el-button><el-button @click="resetForm">取消</el-button></div></template></el-drawer>
</template><script setup>
const props = defineProps({// 抽屉标题title: {type: String,default: "标题",},// 表单元素 JSONfields: {type: Array,required: true,},// 表单数据form: {type: Object,required: true,},// 表单校验规则rules: {type: Object,default: () => ({}),},// 设置抽屉宽width: {type: String,default: "30%",},// 保存表单方法saveForm: {type: Function,default: () => {},},
});const drawer = ref(false); // 控制抽屉显隐
const customForm = ref(null); // 表单 ref// 提交表单
const submitForm = () => {customForm.value.validate((valid) => {if (valid) {props.saveForm();resetForm();} else {console.log("error submit!!");return false;}});
};// 打开抽屉
function open() {drawer.value = true;
}// 关闭抽屉
const resetForm = () => {customForm.value.resetFields();drawer.value = false;
};defineExpose({open,
});
</script>

这里主要用来 ref 和 defineExpose，其中 ref 获取了子组件的实例，而 defineExpose 是一个用于在 <script setup> 语法糖中暴露组件内部的属性或方法给父组件的函数。通过使用 defineExpose，你可以控制哪些属性和方法可以被外部访问，从而增强组件的封装性和安全性。

vue3 父组件调用子组件 el-drawer 抽屉

之前 Vue3 只停留在理论，现在项目重构，刚好可以系统的实战一下，下面是封装了一个抽屉表单组件，直接在父组件中通过调用子组件的方法打开抽屉： 父组件： <template><div id"app"><…...

编程日记 2025/6/20 4:14:36

JVM运行时数据区内部结构

VM内部结构对于jvm来说他的内部结构主要分成三个部分，分别是类加载阶段，运行时数据区，以及垃圾回收区域，类加载我们放到之后来总结，今天先复习一下类运行区域首先这个区域主要是分成如下几个部分下面举个例子来解释…...

编程日记 2025/6/2 23:24:10

luckysheet与superslide冲突解决

[现象]控制台报错、界面无法操作 $是jquery。查看源码，发现mousewheel方法来自插件mousewheel，luckysheet初始应该会将mousewheel挂载在jquery上。在控制台打印jquery取dom及其方法，结果如下： 不存在mousewheel方法&#xff0c…...

编程日记 2025/6/4 9:40:22

ubuntu环境调用onnxruntime找不到GPU的问题

问题： python安装好onnxruntime无法调用gpu。通过如下代码测试，均为False。 import onnxruntime as ort# 检查ONNX Runtime是否支持CUDA def is_onnxruntime_cuda_supported():return ort.get_device() GPU# 检查ONNX Runtime是否使用CUDA def is_onn…...

编程日记 2025/6/3 2:25:25

【iOS】《Effective Objective-C 2.0》阅读笔记（一）

文章目录前言了解OC语言的起源在类的头文件中尽量少引入其他头文件多用字面量语法，少用与之等价的方法字面量数值字面量数组字面量字典多用类型常量，少用#define预处理指令用枚举法表示状态、选项、状态码总结前言最近开始阅读一些iOS开发的相关书籍…...

编程日记 2025/6/20 4:07:48

linux在没网的情况下如何校验时间超详细拿来即用

一、没有校时服务器的话 1、手动修改 sudo date --set"2024-06-17 13:44:00"二、有校时服务器的话 1、手动校时 ntpdate 14.193.73.22、自动校时写一个校时服务脚本 14.193.73.2 是校验时间服务器 #!/bin/sh while true dontpdate 14.193.73.2sleep 5;hwclock…...

编程日记 2025/6/2 17:14:13

springBoot项目框架创建后缺少iml文件

springBoot项目创建好之后缺少iml文件解决方案： 按两下ctrl出现一下内容在右上角project的下拉框中选中缺少文件的项目输入 mvn idea:module 回车执行重构...

编程日记 2025/5/30 15:33:54

【OJ题解】最长回文子串

个人主页: 起名字真南的CSDN博客个人专栏: 【数据结构初阶】 📘 基础数据结构【C语言】 💻 C语言编程技巧【C】 🚀 进阶C【OJ题解】 📝 题解精讲目录 **题目链接****解题思路****1. 初步判断****2. 回文子串性质****3. 判断是…...

编程日记 2025/6/4 7:14:03

kubeadm安装K8s高可用集群之集群初始化及master/node节点加入calico网络插件安装

系列文章目录 1.kubeadm安装K8s高可用集群之基础环境配置 2.kubeadm安装K8s集群之高可用组件keepalivednginx及kubeadm部署 3.kubeadm安装K8s高可用集群之集群初始化及master/node节点加入集群calico网络插件安装 kubeadm安装K8s高可用集群之集群初始化及master/node节点加入ca…...

编程日记 2025/6/19 20:22:18

动态设置路由标题title；动态设置路由配置meta；独享的守卫beforeEnter

案例：同一个页面即使新增，又是编辑、详情页。导致路由配置里的title无法固定通过路由的独享的守卫beforeEnter解决配置；同时beforeEnter一定程度上可以帮助处理vue3缓存问题 {path: "methodApplicationFormOperate",name: "M…...

编程日记 2025/6/2 22:31:02

探秘UI自动化测试工具Playwright工作原理

相关文章：playwright系列教程 Playwright简介微软出品的强大工具 Playwright是由微软推出的一款开源自动化测试工具，专门为Web测试和自动化场景而设计。在现代Web开发的快节奏环境下，其凭借出色的性能和丰富的功能，成为众多开…...

编程日记 2025/5/31 1:56:17

111.【C语言】数据结构之二叉树的销毁函数

目录 1.知识回顾 2.分析 3.代码后序遍历销毁(最简洁) 前序遍历销毁(不推荐) 中序遍历销毁(不推荐) 4.将函数嵌入main函数中执行 1.知识回顾 106.【C语言】数据结构之二叉树的三种递归遍历方式 2.分析销毁二叉树需要按照一定的顺序去销毁,例如:先销毁根还是先销毁根…...

编程日记 2025/5/29 14:11:04

WPF xaml 文件详解

<div id"content_views" class"htmledit_views"><h2><a name"t0"></a>1.总述</h2> 创建好了WPF项目后，最重要的是对 App和MainWindow的理解，在一开始的时候，极容易就直接在Main…...

编程日记 2025/6/2 9:27:06

win10配置免密ssh登录远程的ubuntu

为了在终端ssh远程和使用VScode远程我的VM上的ubuntu不需要设置密码，需要在win10配置免密ssh登录远程的ubuntu。在win10打开cmd，执行下面的代码生成密钥对（会提示进行设置，按照默认的配置就行，一直回车）&…...

编程日记 2025/6/20 1:42:13

Android命令行工具--apksigner

使用 Android SDK Build Tools 修订版 24.0.3 及更高版本中提供的 apksigner 工具为 APK 签名，并确保 APK 的签名将在该 APK 支持的所有版本 Android 平台上成功通过验证。注意：如果在使用 apksigner 为 APK 签名后又对 APK 做了更改，则 APK…...

编程日记 2025/6/3 19:33:23

Linux高性能服务器编程 | 读书笔记 |9.定时器

9. 定时器网络程序需要处理定时事件，如定期检测一个客户连接的活动状态。服务器程序通常管理着众多定时事件，有效地组织这些定时事件，使其在预期的时间被触发且不影响服务器的主要逻辑，对于服务器的性能有至关重要的影响。为此&…...

编程日记 2025/6/20 4:12:10

UE5制作伤害浮动数字

效果演示： 首先创建一个控件UI 添加画布和文本文本设置样式添加伤害浮动动画，根据自己喜好调整，我设置了缩放和不透明度添加绑定转到事件图表，事件构造设置动画创建actor蓝图类添加widget 获取位置设置位移创建一个被击中…...

编程日记 2025/6/3 8:50:20

双亲委派机制是Java类加载器的一种工作模式

双亲委派机制是Java类加载器的一种工作模式，确保了类加载的一致性和安全性。以下是对双亲委派机制的详细解析： 一、定义与工作原理双亲委派机制（Parent Delegation Model）要求除了顶层的启动类加载器外，其余的类加载…...

编程日记 2025/6/3 6:08:39

AI智算-k8s部署大语言模型管理工具Ollama

文章目录简介k8s部署OllamaOpen WebUI访问Open-WebUI 简介 Github：https://github.com/ollama/ollama 官网：https://ollama.com/ API：https://github.com/ollama/ollama/blob/main/docs/api.md Ollama 是一个基于 Go 语言开发的可以本地运…...

编程日记 2025/5/30 23:11:14

百度23届秋招研发岗A卷

百度23届秋招研发岗A卷 2024/12/16 1.下面关于 SparkSQL 中 Catalyst 优化器的说法正确的是（ABC） A.Catalyst 优化器利用高级编程语言功能（例如 Scala 的模式匹配）来构建可扩展的查询优化器 B.Catalyst 包含树和操作树的规则集…...

编程日记 2025/6/20 1:39:25

米哈游大数据面试题及参考答案

怎么判断两个链表是否相交？怎么优化？判断两个链表是否相交可以采用多种方法。一种方法是使用双指针。首先分别遍历两个链表，得到两个链表的长度。然后让长链表的指针先走两个链表长度差的步数。之后，同时移动两个链表的指针，每次比较两个指针是否指向相同的节点。如果指…...

编程日记 2025/6/3 13:38:11

Android14 AOSP 允许system分区和vendor分区应用进行AIDL通信

在Android14上，出于种种原因，system分区的应用无法和vendor分区的应用直接通过AIDL的方法进行通信，但是项目的某个功能又需要如此。好在Binder底层其实是支持的，只是在上层进行了屏蔽。修改 frameworks/native/libs/binder/Bp…...

编程日记 2025/6/4 15:34:16

llm chat场景下的数据同步

背景正常的chat/im通常是有单点登录或者利用类似广播的机制做多设备间内容同步的。而且由于长连接的存在，数据同步（想起来）相对简单。而llm的chat在缺失这两个机制的情况下，没见到特别好的做到了数据同步的产品。 llm chat主要两…...

编程日记 2025/5/31 3:55:52

视频去重原理及 Demo 示例

视频去重是一个常见的需求，主要用于视频库或平台管理中，通过判断视频是否相同（或相似）来移除冗余内容。实现视频去重可以通过多种方法，具体选择取决于业务场景和性能要求。 1. 视频去重的原理 1.1 基本原理视频去重…...

编程日记 2025/6/3 9:08:13

【GIS教程】使用GDAL-Python将tif转为COG并在ArcGIS Js前端加载-附完整代码

目录一、数据格式二、COG特点三、使用GDAL生成COG格式的数据四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据一、数据格式 COG（Cloud optimized GeoTIFF）是一种GeoTiff格式的数据。托管在 HTTP 文件服务器上，可以代替geose…...

编程日记 2025/6/2 0:32:35

【ETCD】【源码阅读】深入解析 EtcdServer.applySnapshot方法

今天我们来一步步分析ETCD中applySnapshot函数一、函数完整代码函数的完整代码如下： func (s *EtcdServer) applySnapshot(ep *etcdProgress, apply *apply) {if raft.IsEmptySnap(apply.snapshot) {return}applySnapshotInProgress.Inc()lg : s.Logger()lg.In…...

编程日记 2025/6/3 14:43:44

C# 实现 10 位纯数字随机数

本文将介绍如何用 C# 实现一个生成 10 位纯数字随机数的功能。以下是完整的代码示例： using System; using System.Collections.Generic; using System.Linq; using System.Text;namespace RandomTset {class Program{// 使用GUID作为种子来创建随机数生成器static…...

编程日记 2025/5/30 18:09:49

【热力学与工程流体力学】流体静力学实验,雷诺实验,沿程阻力实验,丘里流量计流量系数测定,局部阻力系数的测定,稳态平板法测定材料的导热系数λ

关注作者了解更多我的其他CSDN专栏过程控制系统工程测试技术虚拟仪器技术可编程控制器工业现场总线数字图像处理智能控制传感器技术嵌入式系统复变函数与积分变换单片机原理线性代数大学物理热工与工程流体力学数字信号处理光电融合集成电路…...

编程日记 2025/6/4 15:34:14

黑盒白盒测试

任务1 黑盒测试之等价类划分法【任务需求】【问题】例：某报表处理系统要求用户输入处理报表的日期，日期限制在2003年1月至2008年12月，即系统只能对该段期间内的报表进行处理，如日期不在此范围内，则显示输入错误信息…...

编程日记 2025/5/30 18:05:20

D99【python 接口自动化学习】- pytest进阶之fixture用法

day99 pytest使用conftest管理fixture 学习日期：20241216 学习目标：pytest基础用法 -- pytest使用conftest管理fixture 学习笔记： fixture(scope"function") conftest.py为固定写法，不可修改名字，使用c…...

编程日记 2025/6/4 5:43:08

RFDiffusion 计算二面角函数解读

th_dih函数来自util.py包，get_dih函数来自kinematics.py包。th_dih函数计算输入向量定义的二面角的余弦值和正弦值，返回一个包含 (cos⁡(ϕ),sin⁡(ϕ)) 的张量。get_dih 函数计算的是传统意义上的二面角。源代码： def th_dih_v(ab, bc, cd):def th_cross(a, b):a, b = t…...

编程日记 2025/6/4 4:44:59

卓易通：鸿蒙Next系统的蜜糖还是毒药？

哈喽，我是老刘最近很多人都在问鸿蒙next系统新上线的卓易通和出境易两款应用。老刘分析了一下这个软件的一些细节，觉得还是蛮有意思的，我觉得可以从使用体验、底层原理和对鸿蒙生态的影响这三个角度来分析一下。使用体验性能看到了一些测…...

编程日记 2025/6/4 0:16:56

Android：展锐T760平台camera PDAF调试

一、平台PDAF流程目前展锐平台主要支持Shield PD Sensor、Dual PD Sensor 1、Shield PD Sensor Type1相位差和信心度结果直接从Sensor输出，不经过平台算法库。 Type2Sensor端抽取PD信息, 放在一块buffer输出， PDAF算法库算出相位差和信心度。 Type3Sensor端直接输出将带有…...

编程日记 2025/6/1 0:59:52

泷羽Sec学习笔记-zmap搭建炮台

zmap搭建炮台 zmap扫描环境：kali-linux 先更新软件库 sudo apt update 下载zmap sudo apt install zmap 开始扫描(需要root权限) sudo zmap -p 80 -o raw_ips.txt 代码解析： sudo：以超级用户（管理员）权限运行…...

编程日记 2025/6/1 19:18:30

web遇到的安全漏洞

最近项目又在做安全漏扫，记录下遇到的常见的web安全问题越权漏洞介绍攻击者可以在授权状态下，通过修改数据包的参数，操作超出现有权限操作的功能点。举例修改密码时，可以通过修改名称参数，修改任意用户密码。任…...

编程日记 2025/6/20 1:39:05

Starfish 因子开发管理平台快速上手：如何完成策略编写与回测

DolphinDB 开发的因子开发管理平台 Starfish 围绕量化投研的因子、策略开发阶段设计，为用户提供了一个从数据管理、因子研究到策略回测的完整解决方案。因子平台的回测引擎提供了多个关键的事件函数，涵盖策略初始化、每日盘前和盘后回调、逐笔、快照和…...

编程日记 2025/6/19 23:46:41

Oracle 数据库中，UNION ALL创建视图的使用详解

目录 UNION ALL 的特点 UNION ALL 的作用 1. 合并结果集 2. 保留重复行 3. 提高性能 UNION ALL 的使用场景 1. 日志或数据拼接 2. 区分数据来源 3. 解决分区表查询注意事项在创建视图中的作用场景 1：合并多个表的数据到视图表结构目标 SQL 实现…...

编程日记 2025/6/3 5:07:02

无名信号量和条件变量

1.使用无名信号量实现春夏秋冬的输出 #include <myhead.h> sem_t sem1,sem2,sem3,sem4; void *fun1() {while(1){sem_wait(&sem1);sleep(1);printf("春\n");sem_post(&sem2);} } void *fun2() {while(1){sem_wait(&sem2);sleep(1);printf("夏…...

编程日记 2025/6/1 18:28:06

之前使用vue-element-admin框架开发的项目无法启动，可能是这个原因

最近运行之前的项目，发现无法正常启动，可能有以下几种情况： 一、版本问题报错： this[kHandle] new _Hash(algorithm, xofLen); Error: error:0308010C:digital 因为在 node V17 版本发布了 OpenSSL3.0 对算法…...

编程日记 2025/5/30 18:44:07

JDK的配置

目录第一步，配置JAVA_HOME. 第二步，进入JDK的bin目录，然后复制路径。第三步，配置CLASSPATH. 第四步，检验是否配置成功安装好JDK后，配置三个环境变量第一步，配置JAVA_HOME. 先找到JDK…...

编程日记 2025/6/3 17:31:41

【Linux系列】Linux 系统中查看目录权限

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/6/19 17:55:12

开启数字化时代心理服务新篇章：专属线上心理咨询服务小程序

在当今快节奏的社会中，心理健康问题日益受到人们的关注。然而，传统的心理咨询模式往往受限于时间和地点，使得许多人在寻求心理帮助时感到不便。与此同时，心理课程的传播也面临着诸多挑战，如何高效地触达目标客户群体&a…...

编程日记 2025/6/3 16:32:49

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。比如： 效果： 代码： TMPtext1.text "\u3000\u3000" "选择动作类型：";...

编程日记 2025/6/1 19:14:00

探索 OpenTofu：开源基础设施即代码工具

引言在现代云计算和 DevOps 实践中，基础设施即代码（IaC）已经成为不可或缺的一部分。它使得基础设施的管理更加自动化、可重复和可维护。HashiCorp 的 Terraform 是这一领域的领先工具，但随着时间的推移，开源社区也开始关注其许可证的变更。OpenTofu 作为 Terraform 的一…...

编程日记 2025/6/19 22:56:08

2024首届世界酒中国菜国际地理标志产品美食文化节成功举办篇章

2024首届世界酒中国菜国际地理标志产品美食文化节成功举办，开启美食文化交流新篇章近日，首届世界酒中国菜国际地理标志产品美食文化节在中国国际地理标志大厦成功举办，这场为期三天的美食文化盛会吸引了来自世界各地的美食爱好者、行业专家…...

编程日记 2025/6/1 6:08:48

宽字节注入

尽管现在呼吁所有的程序都使用unicode编码，所有的网站都使用utf-8编码，来一个统一的国际规范。但仍然有很多，包括国内及国外（特别是非英语国家）的一些cms，仍然使用着自己国家的一套编码，比如gbk…...

编程日记 2025/6/2 10:21:17

H5 scss 移动端的样式适配

在移动端样式的scss文件中，出现了这些变量 env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left: 安全区域距…...

编程日记 2025/6/19 17:49:41

240004基于Jamva+ssm+maven+mysql的房屋租赁系统的设计与实现

基于ssmmavenmysql的房屋租赁系统的设计与实现 1.项目描述2.运行环境3.项目截图4.源码获取 1.项目描述该项目在原有的基础上进行了优化，包括新增了注册功能，房屋模糊查询功能，管理员和用户信息管理等功能，以及对网站界面进行了优…...

编程日记 2025/6/2 20:05:17

Word2Vec 模型 PyTorch 实现并复现论文中的数据集

详细注解链接：https://www.orzzz.net/directory/codes/Word2Vec/index.html 欢迎咨询！...

编程日记 2025/5/26 17:50:33

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(一)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(一) 你好，我是拉依达。感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Lin…...

编程日记 2025/6/1 16:45:36