Vue弹窗的使用与传值

使用element-UI中的Dialog 对话框 + vue组件结合实现~~~·~

定义html

<div @click="MyAnalyze()">我的区划</div><el-dialog title="" :visible.sync="dialogBiomeVisible"><NationalBiome :closeValue="'TypeBiome'" @closeMoule="closeMoule"></NationalBiome></el-dialog>

<el-dialog> </el-dialog> 这是element-UI自带的标签,

:visible.sync="" 是用来控制显示或者隐藏状态,当dialogBiomeVisible的值为true的时候为显示,false的时候就是隐藏,

<NationalBiome></NationalBiome> 这个就是自己定义的组件名;

引入组件

<script>
import NationalBiome from './National_Biome';  //组件内部引入 ---编辑生态区
export default {name: 'App',components:{  //定义组件NationalBiome, //编辑生态区},
}

components中用来定义组件名称,名称要和important的时候保持一致

传值--父组件传子组件

父组件中的定义

父组件向之组件传值的时候,需要在组件标签中定义一个自定义属性进行传值,可以传一个字符串,也可以传一个变量

子组件中的定义(取值)

子组件在export default{}中通过props来进行接收,使用的时候可以直接当变量使用,js中通过this.closeValue取值,html中{{closeValue}}

传值--子组件传父组件

子组件中的定义

子组件中通过触发某个事件,然后通过this.$emit()来进行传值,第一个值是事件名,第二个是传递的值

<!--关闭按钮-->
<div class="fr right_icon" @click="closeBtn()"><s></s>
</div>
 methods:{//点击关闭的时候--给调用的父组件传值closeBtn(){if(this.closeValue == "TypeBiome"){this.$emit('closeMoule','closeMoule1')}}
}

父组件定义(取值)

定义一个事件监听子组件的数据变化 closeMoule方法的参数就是子组件中closeMoule1的值

<SpeciesAnalyzed :closeValue="'TypeBiome'" @closeMoule="closeMoule"></SpeciesAnalyzed>
methods:{
//获取自组建传过来的值--关闭编辑生态区的弹框closeMoule(e){alert(e)}
}

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

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

相关文章

ruoyi-plus-vue docker 部署

本文以 ruoyi-vue-plus 5.x docker 部署为基础 安装虚拟机 部署文档 安装docker 安装docker 安装docker-compose 配置idea环境 上传 /doicker 文件夹 到服务器&#xff1b;赋值 777权限 chmod -R 777 /docker idea构建 jar 包 利用 idea 构建镜像; 创建基础服务 docker…

Oracle(2-5)Usage and Configuration of the Oracle Shared Server

文章目录 一、基础知识1、 Server Configurations服务器配置2、Dedicated server process专用服务器进程3、Oracle Shared ServerOracle共享服务器4、Benefits of Shared Server 共享服务器的优点5、Processing a Request 处理请求6、Configuring Shared Server 配置共享服务器…

设计模式-创建型模式-工厂方法模式

一、什么是工厂方法模式 工厂模式又称工厂方法模式&#xff0c;是一种创建型设计模式&#xff0c;其在父类中提供一个创建对象的方法&#xff0c; 允许子类决定实例化对象的类型。工厂方法模式是目标是定义一个创建产品对象的工厂接口&#xff0c;将实际创建工作推迟到子类中。…

Redis报错:JedisConnectionException: Could not get a resource from the pool

1、问题描述&#xff1a; redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the pool 2、简要分析&#xff1a; redis.clients.util.Pool.getResource会从JedisPool实例池中返回一个可用的redis连接。分析源码可知JedisPool 继承了 r…

PyQt6把QTDesigner生成的UI文件转成python源码,并运行

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计18条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…

NSGA-II求解微电网多目标优化调度(MATLAB)

一、NSGA-II简介 NSGA-Ⅱ算法是Kalyanmoy Deb等人于 2002年在 NSGA 的基础上提出的&#xff0c;它比 NSGA算法更加优越&#xff1a;它采用了快速非支配排序算法&#xff0c;计算复杂度比 NSGA 大大的降低&#xff1b;采用了拥挤度和拥挤度比较算子&#xff0c;代替了需要指定的…

python实现自动刷平台学时

背景 前一阵子有个朋友让我帮给小忙&#xff0c;因为他每学期都要看视频刷学时&#xff0c;一门平均需要刷500分钟&#xff0c;一学期有3-4门需要刷的。 如果是手动刷的话&#xff0c;比较麻烦&#xff0c;能否帮他做成自动化的。搞成功的话请我吃饭。为了这顿饭&#xff0c;咱…

Python语言学习笔记之三(字符编码)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 什么是字符编码 计算机从本质上来说只认识二进制中的0和1&#xff0c;字符编码(Character Encoding) 是一种将…

Android Bitmap 模糊效果实现 (二)

文章目录 Android Bitmap 模糊效果实现 (二)使用 Vukan 模糊使用 RenderEffect 模糊使用 GLSL 模糊RS、Vukan、RenderEffect、GLSL 效率对比 Android Bitmap 模糊效果实现 (二) 本文首发地址 https://blog.csdn.net/CSqingchen/article/details/134656140 最新更新地址 https:/…

便利高效双赢:无人机油气管道巡检全面升级

我国庞大的油气管道网络&#xff0c;包括原油、成品和天然气管道&#xff0c;因为地理区域广泛、建设年代久远、安全事故频发等现实因素&#xff0c;对管道的安全巡护与管理提出了更高的需求。在这一背景下&#xff0c;传统的人工巡护方式显然已经难以满足对高、精、准的要求。…

antd vue a-select 下拉框位置偏移

问题 下拉框未固定 原因 select下拉框的定位是根据body定位 解决方法 在select 标签中添加&#xff1a; :getPopupContainer"(triggerNode) > (triggerNode.parentElement)" :getPopupContainer"(triggerNode) > (triggerNode.parentElement)"…

Linux 面试题(一)

目录 1、绝对路径用什么符号表示&#xff1f;当前目录、上层目录用什么表示&#xff1f;主目录用什么表示? 切换目录用什么命令&#xff1f; 2、怎么查看当前进程&#xff1f;怎么执行退出&#xff1f;怎么查看当前路径&#xff1f; 3、怎么清屏&#xff1f;怎么退出当前命…

【Spring Boot】如何在Linux系统中快速启动Spring Boot的jar包

在Linux系统中先安装java的JDK 然后编写下列service.sh脚本&#xff0c;并根据自己的需求只需要修改export的log_path、exec_cmd参数即可 # 配置运行日志输出的路径 export log_path/usr/local/project/study-pro/logs # 当前服务运行的脚本命令 export exec_cmd"nohup /u…

redis-cluster集群

redis3.0引入的分布式存储方案 集群由多个node节点组成&#xff0c;redis数据分布在这些节点之中&#xff0c;在集群之中分为主节点和从节点 数据流程图 redis-cluster集群的工作模式 集群模式当中&#xff0c;主从一一对应&#xff0c;数据写入和读取与主从模式一样&#x…

<Linux> 文件理解与操作

目录 前言&#xff1a; 一、关于文件的预备知识 二、C语言文件操作 1. fope 2. fclose 3. 文件写入 3.1 fprintf 3.2 snprintf 三、系统文件操作 1. open 2. close 3. write 4. read 四、C文件接口与系统文件IO的关系 五、文件描述符 1. 理解文件描述符 2. 文…

蓝桥杯官网算法赛(蓝桥小课堂)

问题描述 蓝桥小课堂开课啦&#xff01; 海伦公式&#xff08;Herons formula&#xff09;&#xff0c;也称为海伦-秦九韶公式&#xff0c;是用于计算三角形面积的一种公式&#xff0c;它可以通过三条边的长度来确定三角形的面积&#xff0c;而无需知道三角形的高度。 海伦公…

同旺科技 USB 转 RS-485 适配器 -- 隔离型

内附链接 1、USB 转 RS-485 适配器 隔离版主要特性有&#xff1a; ● 支持USB 2.0/3.0接口&#xff0c;并兼容USB 1.1接口&#xff1b; ● 支持USB总线供电&#xff1b; ● 支持Windows系统驱动&#xff0c;包含WIN10 / WIN11 系统32 / 64位&#xff1b; ● 支持Windows …

必备极速下载工具 — aria2

必备极速多线程并行下载工具 — aria2 aria2 是一款免费开源跨平台且不限速的多线程下载软件&#xff0c;其优点是速度快、体积小、资源占用少&#xff1b;支持 HTTP / FTP / BT / Magnet 磁力链接等类型的文件下载&#xff1b;支持 Win、Mac、Linux 系统&#xff0c;甚至在树莓…

Kotlin学习——流程控制,when,循环,range工具 kt里的equals if实现类似三元表达式的效果

Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复用代码&#xff0c;以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…

「江鸟中原」有关HarmonyOS-ArkTS的Http通信请求

一、Http简介 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于在Web应用程序之间进行通信的协议&#xff0c;通过运输层的TCP协议建立连接、传输数据。Http通信数据以报文的形式进行传输。Http的一次事务包括一个请求和一个响应。 Http通信是基于客户端-服…