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封装成子组件(组件化)
前言 实际开发过程中我们经常听见组件化开发,但在实际开发过程中(没有人审查时)怎么方便来 我们有时是因为时间不够,所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行 虽然不能要求自己写出高效复用性高的组件&…...
爬虫教程 一 requests包的使用
request 简介 requests 是一个常用的 HTTP 请求库,可以方便地向网站发送 HTTP 请求,并获取响应结果。 response.text 和response.content的区别 response.text 类型:str解码类型: requests模块自动根据HTTP 头部对响应的编码作…...
Aria2NG连接aria2-pro提示认证失败的处理办法
本文档适用于已经安装了aria2-pro和AriaNg的小伙伴~ 第一次登录管理端会提示”认证失败“ 这是因为aria设置了密码,需要在设置中配置上密码即可 配置完密码重新加载就可以正常使用啦 下载速度明显比以前快了很多 下载参考文档 Docker安装下载神器aria2并使用过程记…...
MYSQL 连接
高频 SQL 50 题(基础版) - 学习计划 - 力扣(LeetCode)全球极客挚爱的技术成长平台 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,提高性能和内存效率
本月早些时候,我们听说更新到安卓14似乎提高了谷歌Pixel 7和Pixel 6的效率——提高了电池寿命,并在这个过程中减少了热量的产生。现在看来,安卓14的增效功能细节已经公布。 安卓侦探Mishaal Rahman在X(前身为Twitter)…...
jupyter崩溃OOM,out of memory,jupyter代码写不进去,保存不了。
最近写一个比较长的数据处理代码,有快千行,然后经常代码没有写入,然后直接网页崩溃,给我干蒙了。我已经是jupyter版本的问题,弄了半天,弄完,还是有这个问题。然后就查了一下,发现是j…...
一文带你快速掌握爬虫开发中的一些高级调试技巧
文章目录 1. 写在前面2. Reply XHR(重新发起请求)3. copy as fecth(修改参数请求)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们,大家好。这里是C入门的第十六讲。 座右铭:前路坎坷,披荆斩棘,扶摇直上。 博客主页: 姬如祎 收录专栏:C专题 目录 1.构造函数 1.1 string() 1.2 string(const char* s) 1.3 string(const …...
闲着也是闲着,自己写歌东西玩一玩,碰碰脑子,简单快乐一点,双人出数的小游戏,后续还带补充
主旨就是每个人出一个数,目前限制两人,之后考虑多人,然后对其取差值,获取到一个结果,比对结果的奇偶数,还可以看下两人出同一个数的概率,反正概率上是一个比较稳定的。 当然自己想玩的活也可以做…...
牛客网 -- WY28 跳石板
题目链接: 跳石板_牛客题霸_牛客网 (nowcoder.com) 解题步骤: 参考代码: void get_approximate(vector<int>& v,int n) {//求约数,从2到sqrt(n)即可,原因看图解//这里一定要等于sqrt(n),例如16…...
[正式学习java③]——字符串在内存中的存储方式、为什么字符串不可变、字符串的拼接原理,键盘录入的小细节。
一、字符串 1.字符串在内存中的存储方式 🔥在java中,内存中有两个地方可以存储字符串,一个是字符串池,一个是堆内存,串池中的字符串不会重复,而堆中的字符串每次都会开辟一块新的空间,因为维护…...
行情分析——加密货币市场大盘走势(10.18)
大饼昨日小幅度的下跌回调了,很快又上涨。目前看下来震荡向下刚刚开始,可以关注后续情况。大饼依然保持看空不做空,目前除了独立行情的币,就大饼非常强势。目前从MACD日线来看,还是保持多头趋势,预计明后两…...
高并发场景下常见的限流算法及方案介绍
应用场景 现代互联网很多业务场景,比如秒杀、下单、查询商品详情,最大特点就是高并发,而往往我们的系统不能承受这么大的流量,继而产生了很多的应对措施:CDN、消息队列、多级缓存、异地多活。 但是无论如何优化&…...
虹科分享 | 选择SAS还是NVMe?虹科网络基础带您一探究竟!
存储架构师需要通过确保他们选择的存储解决方案提供支持其生态系统所需的安全性、稳定性、可扩展性和管理特性来应对当今的业务挑战。当他们考虑采用新的存储技术时,在采用新技术之前,他们应该权衡和审查一些基本的考虑因素。新的存储协议不断进入市场&a…...
在ERP管理系统中,库存管理的基本流程是什么?
在ERP管理系统中,库存管理的基本流程是什么? 下面我就以我们公司正在用的简道云库存管理系统为例,为大家进行库存管理基本流程的演示 这个系统是我们公司自己搭建的,大家如果有需要可以自取,也可以在模板的基础上自行…...
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的值。 这两项调整和系统进行自动回收有关,当内存不足时,系统会关闭一些进程来释放内存,下面就依据这两方面来看…...
【数据可视化】—大屏数据可视化展示
【数据可视化】—大屏数据可视化展示 一、数据可视化 数据可视化的目的:借助于图形化工具,清晰有效的传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。 二、 免费数据可视化库 Echarts 百度…...
ssm+java2026年毕设蔬果批发网络平台【源码+论文】
本系统(程序源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、选题背景关于农产品电商交易模式的研究,现有研究主要以综合电商平台(如淘宝、京东)的农产品销售模式…...
利润中心(Profit Center)和段(Segment)在 SAP 中关系非常紧密,但它们的设计目的和应用场景有本质区别
利润中心(Profit Center)和段(Segment)在 SAP 中关系非常紧密,但它们的设计目的和应用场景有本质区别。简单来说,段(Segment)是利润中心的一个上级归类。它们之间通常是“一对多”的…...
避开这5个坑!用MediaRecorder+Vue3实现高兼容性语音输入
Vue3MediaRecorder实战:5个关键技巧打造高兼容语音输入方案 在移动优先的时代,语音输入已成为提升用户体验的重要交互方式。但当你兴奋地在Vue3项目中集成MediaRecorder API时,可能会遇到iOS设备上的静默失败、Android机型上的格式兼容性问题…...
路沿模板,乐山水泥路面模板,40公分路面钢模哪里有名
打路面模板:乐山水泥路面的优质之选在道路建设中,打路面模板起着至关重要的作用。它不仅关系到路面的成型质量,还影响着整个工程的效率和成本。乐山地区对于道路建设的需求不断增加,尤其是在水泥路面的铺设方面,40公分…...
亿芸甄选商业模式系统开发
亿芸甄选商业模式系统开发:数字化驱动的新零售增长引擎在新零售行业加速数字化转型的背景下,亿芸甄选凭借其创新的商业模式与技术架构,成为美业等细分领域的增长。该系统以“级差分红智能运营”为核心,通过多层次激励机制与数字化…...
QMCDecode:让音乐自由播放的开源格式转换工具
QMCDecode:让音乐自由播放的开源格式转换工具 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac,qmc0,qmc3转mp3, mflac,mflac0等转flac),仅支持macOS,可自动识别到QQ音乐下载目录,默认转换结果存…...
Natapp内网穿透避坑指南:Windows系统常见报错解决方案(2024最新版)
Natapp内网穿透避坑指南:Windows系统常见报错解决方案(2024最新版) 在开发过程中,内网穿透工具如Natapp已成为连接本地开发环境与外部网络的必备利器。然而,对于初次接触Natapp的Windows用户来说,从安装配…...
如何从其他理财应用迁移到Ivy Wallet:数据导入完全指南
如何从其他理财应用迁移到Ivy Wallet:数据导入完全指南 【免费下载链接】ivy-wallet Ivy Wallet is an open-source money manager app for android that you can either build or download from Google Play. 项目地址: https://gitcode.com/gh_mirrors/iv/ivy-w…...
内存取证新手必看:用Lovelymem+MemProcFS挂载分析,像访问文件夹一样查看RAW镜像
内存取证革命:用LovelymemMemProcFS实现零命令行分析 想象一下,当你拿到一个18GB的内存镜像文件时,不再需要面对密密麻麻的命令行参数和漫长的等待时间。传统内存取证工具如Volatility虽然强大,但对于初学者来说,记忆各…...
Windows Cleaner智能清理工具:系统优化与空间释放的全面解决方案
Windows Cleaner智能清理工具:系统优化与空间释放的全面解决方案 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服! 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 随着计算机使用时间的增长࿰…...
