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

vue el-dialog封装成子组件(组件化)

前言

  • 实际开发过程中我们经常听见组件化开发,但在实际开发过程中(没有人审查时)怎么方便来

  • 我们有时是因为时间不够,所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行

  • 虽然不能要求自己写出高效复用性高的组件,把dialog弹出框写成一个子组件抽走还是可以的

  • 当你把表单抽在就会发现代码少了很多

代码实现

1.在文件下创建components文件夹创建DialogForm.vue文件

<template><div><el-dialogtitle="表单":visible="dialogVisible"width="45%"@close="handleClose"><span>子组件弹出框</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">关 闭</el-button><el-button type="primary" @click="dialogVisible = false">发起合同审批</el-button></span></el-dialog></div>
</template>
​
<script>
export default {name: 'DialogForm',props: {DialogFlag: {default: false}},data () {return {// 开关dialogVisible: false,}},watch: {DialogFlag () {this.dialogVisible = this.DialogFlag}},created () {console.log('审批页面执行')},methods: {// 表单关闭事件-通知父组件关闭(.syanc)// 不通知父组件可能会报错,导致只能打开一次handleClose () {this.$emit('update:DialogFlag', false)},}
}
</script>
 

2.在index.vue页面中使用

// 引入组件
import DialogForm from './components/DialogForm.vue'
​
//注册组件components: {DialogForm},//dataDialogFlag: false
​
// html
<DialogForm :DialogFlag.sync="DialogFlag" />
​
// 使用组件<el-buttontype="primary"icon="el-icon-circle-plus-outline"@click="examinadd">打开表单</el-button>examinadd () {this.DialogFlag = true},

总结:

经过这一趟流程下来相信你也对 vue el-dialog封装成子组件(组件化)有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

相关文章:

vue el-dialog封装成子组件(组件化)

前言 实际开发过程中我们经常听见组件化开发&#xff0c;但在实际开发过程中&#xff08;没有人审查时&#xff09;怎么方便来 我们有时是因为时间不够&#xff0c;所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行 虽然不能要求自己写出高效复用性高的组件&…...

爬虫教程 一 requests包的使用

request 简介 requests 是一个常用的 HTTP 请求库&#xff0c;可以方便地向网站发送 HTTP 请求&#xff0c;并获取响应结果。 response.text 和response.content的区别 response.text 类型&#xff1a;str解码类型&#xff1a; requests模块自动根据HTTP 头部对响应的编码作…...

Aria2NG连接aria2-pro提示认证失败的处理办法

本文档适用于已经安装了aria2-pro和AriaNg的小伙伴~ 第一次登录管理端会提示”认证失败“ 这是因为aria设置了密码&#xff0c;需要在设置中配置上密码即可 配置完密码重新加载就可以正常使用啦 下载速度明显比以前快了很多 下载参考文档 Docker安装下载神器aria2并使用过程记…...

MYSQL 连接

高频 SQL 50 题&#xff08;基础版&#xff09; - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 1378. 使用唯一标识码替换员工ID SELECT COALESCE(unique_id, NULL) AS unique_id,name FROM Employees LEFT JOIN EmployeeUNI ON Employees.…...

SeaTunnel 换maven源,解决插件下载慢

SeaTunnel 是使用的mvnw命令,可以先执行一下install-plugin.sh然后终止 理论上应该可以直接执行mvnw,他就会去安装下载maven,目录就是下面的目录 然后去服务器目录修改 setting.xml文件,设置镜像源即可 /root/.m2/wrapper/dists/apache-maven-3.8.4-bin/52ccbt68d252mdldqsfsn…...

安卓14通过“冻结”缓存应用程序腾出CPU,提高性能和内存效率

本月早些时候&#xff0c;我们听说更新到安卓14似乎提高了谷歌Pixel 7和Pixel 6的效率——提高了电池寿命&#xff0c;并在这个过程中减少了热量的产生。现在看来&#xff0c;安卓14的增效功能细节已经公布。 安卓侦探Mishaal Rahman在X&#xff08;前身为Twitter&#xff09;…...

jupyter崩溃OOM,out of memory,jupyter代码写不进去,保存不了。

最近写一个比较长的数据处理代码&#xff0c;有快千行&#xff0c;然后经常代码没有写入&#xff0c;然后直接网页崩溃&#xff0c;给我干蒙了。我已经是jupyter版本的问题&#xff0c;弄了半天&#xff0c;弄完&#xff0c;还是有这个问题。然后就查了一下&#xff0c;发现是j…...

一文带你快速掌握爬虫开发中的一些高级调试技巧

文章目录 1. 写在前面2. Reply XHR&#xff08;重新发起请求&#xff09;3. copy as fecth&#xff08;修改参数请求&#xff09;4. copy()复制变量5. Web网页全屏截图6. 控制台安装使用npm7. 控制台中引用上次执行结果8. 控制台表展示对象数组 1. 写在前面 做过爬虫开发的人都…...

6.(vue3.x+vite)路由传参query与params区别

前端技术社区总目录(订阅之前请先查看该博客) 效果截图 一:路由传参有两种方式:params与query params与query区别 1:param,路由带“/”,query带“?” 2:query传过来的参数会显示到地址栏中 而params传过来的参数可以显示参数或隐藏参数到地址栏中(vue-router 4.1.4不…...

C++string的使用

CSDN的uu们&#xff0c;大家好。这里是C入门的第十六讲。 座右铭&#xff1a;前路坎坷&#xff0c;披荆斩棘&#xff0c;扶摇直上。 博客主页&#xff1a; 姬如祎 收录专栏&#xff1a;C专题 目录 1.构造函数 1.1 string() 1.2 string(const char* s) 1.3 string(const …...

闲着也是闲着,自己写歌东西玩一玩,碰碰脑子,简单快乐一点,双人出数的小游戏,后续还带补充

主旨就是每个人出一个数&#xff0c;目前限制两人&#xff0c;之后考虑多人&#xff0c;然后对其取差值&#xff0c;获取到一个结果&#xff0c;比对结果的奇偶数&#xff0c;还可以看下两人出同一个数的概率&#xff0c;反正概率上是一个比较稳定的。 当然自己想玩的活也可以做…...

牛客网 -- WY28 跳石板

题目链接&#xff1a; 跳石板_牛客题霸_牛客网 (nowcoder.com) 解题步骤&#xff1a; 参考代码&#xff1a; void get_approximate(vector<int>& v,int n) {//求约数&#xff0c;从2到sqrt(n)即可&#xff0c;原因看图解//这里一定要等于sqrt(n)&#xff0c;例如16…...

[正式学习java③]——字符串在内存中的存储方式、为什么字符串不可变、字符串的拼接原理,键盘录入的小细节。

一、字符串 1.字符串在内存中的存储方式 &#x1f525;在java中&#xff0c;内存中有两个地方可以存储字符串&#xff0c;一个是字符串池&#xff0c;一个是堆内存&#xff0c;串池中的字符串不会重复&#xff0c;而堆中的字符串每次都会开辟一块新的空间&#xff0c;因为维护…...

行情分析——加密货币市场大盘走势(10.18)

大饼昨日小幅度的下跌回调了&#xff0c;很快又上涨。目前看下来震荡向下刚刚开始&#xff0c;可以关注后续情况。大饼依然保持看空不做空&#xff0c;目前除了独立行情的币&#xff0c;就大饼非常强势。目前从MACD日线来看&#xff0c;还是保持多头趋势&#xff0c;预计明后两…...

高并发场景下常见的限流算法及方案介绍

应用场景 现代互联网很多业务场景&#xff0c;比如秒杀、下单、查询商品详情&#xff0c;最大特点就是高并发&#xff0c;而往往我们的系统不能承受这么大的流量&#xff0c;继而产生了很多的应对措施&#xff1a;CDN、消息队列、多级缓存、异地多活。 但是无论如何优化&…...

虹科分享 | 选择SAS还是NVMe?虹科网络基础带您一探究竟!

存储架构师需要通过确保他们选择的存储解决方案提供支持其生态系统所需的安全性、稳定性、可扩展性和管理特性来应对当今的业务挑战。当他们考虑采用新的存储技术时&#xff0c;在采用新技术之前&#xff0c;他们应该权衡和审查一些基本的考虑因素。新的存储协议不断进入市场&a…...

在ERP管理系统中,库存管理的基本流程是什么?

在ERP管理系统中&#xff0c;库存管理的基本流程是什么&#xff1f; 下面我就以我们公司正在用的简道云库存管理系统为例&#xff0c;为大家进行库存管理基本流程的演示 这个系统是我们公司自己搭建的&#xff0c;大家如果有需要可以自取&#xff0c;也可以在模板的基础上自行…...

Ruby 之 csv 文件读写

csv 文件写入 require csvtitle ["col1", "col2"] contents [["row11", "row12"], ["row21", "row22"]]csv1 CSV.open("test1.csv", "wb") do |csv|# write file titlecsv << titl…...

Android AMS——进程LRU列表更新(十七)

AMS对进程的管理主要体现在两个方面: 进程LRU列表动态更新:动态调整进程在mLruProcesses列表的位置进程优先级动态调整:实际是调整进程oom_adj的值。 这两项调整和系统进行自动回收有关,当内存不足时,系统会关闭一些进程来释放内存,下面就依据这两方面来看…...

【数据可视化】—大屏数据可视化展示

【数据可视化】—大屏数据可视化展示 一、数据可视化 数据可视化的目的&#xff1a;借助于图形化工具&#xff0c;清晰有效的传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形&#xff0c;揭示蕴含在数据中的规律和道理。 二、 免费数据可视化库 Echarts 百度…...

数字图像处理核心算法手撕实现 (一)

1. 数字图像处理基础概念 数字图像处理就像给照片做美容手术&#xff0c;只不过操作对象是像素矩阵。我第一次接触这个概念是在大学实验室&#xff0c;当时对着一个512x512的灰度图矩阵发呆了半小时&#xff0c;才明白那些0-255的数字代表着什么。 空间分辨率相当于照片的&qu…...

pandas API on Spark 与 pandas / PySpark 互转指南

1. 为什么会有互转需求 pandas API on Spark 的定位很特殊&#xff1a;它既想保留 pandas 的使用体验&#xff0c;又建立在 Spark 的分布式执行之上。因此开发时常见的场景有三种&#xff1a; 已经有 pandas 代码&#xff0c;想迁移到分布式环境已经在用 PySpark DataFrame&…...

Z-Image-Turbo LoRA Web服务安全加固:禁用前端覆盖负面提示+后端content policy双层防护

Z-Image-Turbo LoRA Web服务安全加固&#xff1a;禁用前端覆盖负面提示后端content policy双层防护 1. 项目概述与安全挑战 造相-Z-Image-Turbo 亚洲美女LoRA Web服务是一个基于Z-Image-Turbo模型的图片生成平台&#xff0c;集成了laonansheng/Asian-beauty-Z-Image-Turbo-To…...

保姆级教程:用华为eNSP复现一个能跑通的企业网毕业设计(含VRRP、OSPF、防火墙策略)

华为eNSP企业网实战&#xff1a;从零构建高可用网络架构 刚接触网络工程的学生或初级工程师&#xff0c;面对企业级网络设计时常常陷入配置迷雾——为什么这里要用VRRP&#xff1f;OSPF区域划分的依据是什么&#xff1f;防火墙策略如何与NAT协同工作&#xff1f;本文将以华为eN…...

JETSON平台SDKManager一站式部署指南:从刷机到外置存储系统迁移

1. 开箱即用&#xff1a;JETSON开发板基础准备 刚拿到JETSON开发板时&#xff0c;很多开发者会对着这块巴掌大的硬件发懵。以我经手过的几十块JETSON TX2 NX为例&#xff0c;正确的开箱姿势应该是先检查配件完整性。除了开发板本体&#xff0c;你还需要准备&#xff1a; 5V/4…...

CLIP ViT-H-14多场景适配方案:教育题库图像索引、医疗报告配图推荐、设计素材库检索

CLIP ViT-H-14多场景适配方案&#xff1a;教育题库图像索引、医疗报告配图推荐、设计素材库检索 1. 项目概述 CLIP ViT-H-14图像编码服务是基于CLIP ViT-H-14(laion2B-s32B-b79K)模型的图像特征提取解决方案。这项服务通过RESTful API和Web界面两种方式&#xff0c;为不同行业…...

技术速递|6000 万次 Copilot 代码审查 且仍在持续增长

作者&#xff1a;Ria Gopu & David Apirian排版&#xff1a;Alan WangCopilot 代码审查如何帮助团队跟上 AI 加速带来的代码变更。自去年 4 月我们首次推出 Copilot 代码审查&#xff08;CCR&#xff09;以来&#xff0c;其使用量已增长了 10 倍&#xff0c;目前已占 GitHu…...

Kettle转换里‘阻塞数据’控件为啥不灵?我用这个真实ETL案例给你讲透

Kettle转换中‘阻塞数据’控件的实战解析&#xff1a;从失效到精准控制 在ETL工具Kettle的实际应用中&#xff0c;数据流的精确控制往往是决定任务成败的关键。许多中高级用户在使用"阻塞数据直到步骤都完成"控件时&#xff0c;都曾遇到过看似配置正确却无法生效的困…...

10分钟搞定 Nginx 安装:Linux/Windows 双平台实测(附避坑指南)

一、前言上一篇我们初识了Nginx——知道了它是高性能的HTTP和反向代理服务器&#xff0c;懂了它为什么被99%的互联网公司青睐&#xff0c;也明确了我们后续的学习路线。本篇文章将手把手教你在Linux和Windows系统上&#xff0c;完成Nginx的安装、部署、启动、停止 &#xff0c;…...

Zemax光学设计(三)——从艾里斑到系统分辨率:衍射极限的实战解析

1. 艾里斑&#xff1a;光学的终极像素 当你用手机拍夜景时&#xff0c;为什么远处的路灯总变成模糊的光团&#xff1f;这背后隐藏着光学系统的基本限制——艾里斑。我在设计微型内窥镜镜头时&#xff0c;曾花了三周时间优化像差&#xff0c;最终却发现图像清晰度卡在一个无法突…...