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

vue中把弹出层.vue文件注册成组件供其他.vue文件调用的写法

背景:因弹出层多个页面的详情都是一样的,因此把弹出层定义成组件,多次调用

        定义组件的过程中出现很多问题,因此再次记录最终成功的写法        

一、 简单实现页面调用弹出层组件的打开弹出层方法:

1. 弹出层组件 (index.vue)文件定义:
<template><el-dialog title="详情" :visible.sync="dialogTableVisible" >...</el-dialog> <!-- dialogTableVisible全局定义boolean值控制弹出或关闭-->
</template><script>import { getDetailById} from "@/api/xxx/aaa";  //引入aaa.js中定义的getDetailById方法export default {name: "MyDialogComponent",data() {return {dialogTableVisible: false   //弹出层是否打开};},methods: {open(id) { //打开弹出层方法被父组件 的 this.$refs.MyDialogComponent.open(row.id);方法调用this.dialogTableVisible = true;//打开弹出层getDetailById(id).then(response => {  //调用引入方法查询详情记录this.form = response.data;});},}}
</script>
2. 在某个页面中引入弹出层组件并使用:
<template><!-- 弹出层组件的使用 --><MyDialogComponent ref="MyDialogComponent"></MyDialogComponent> 
</template><script>import MyDialogComponent from '@/components/pcReleaseDialog/index'   //引入详情弹出层组件,组件路径src/components/pcReleaseDialog/index.vueexport default {components: { MyDialogComponent },  //注册弹出层组件data() {return {...};},methods: {openDetail(row) {  //点击列表标题显示详情弹出层this.$refs.MyDialogComponent.open(row.id); // 触发子组件的打开弹出层方法 ---必须手动触发,子组件定义弹出层打开的方法不能写在create方法里面,否则父组件刷新就会弹出//需要使用$refs.调用子组件的方法,那么在上面使用子组件标签时就必须定义  ref="MyDialogComponent",否则无法调用子组件的方法,如果只是组件间通信可以不需要定义 ref}}}
</script>
结: 弹出层正常定义,父组件中把该弹出层定义成组件进行调用,
        调用步骤:
                1. 引入堂出差组件:  import xxx from  xxxx
                2. 注册堂出差组件:  components: { xxx}, 
                3. 调用打开弹出层的方法:this.$refs.xxx.open(row.id);
                4. 弹出层组件的使用(使用这个标签)需要添加ref属性,否则第3步无法成功

二、子父组件间通信 (如上的弹出层就是子组件,引入并使用了弹出层组件的就是父组件)

       1.  子组件(弹出层)定义props,并在props中定义子父通信的属性,如下代码中的pid
        2. 父组件 只要定义有跟子组件中props定义的属性相同即可

        (如下代码,子组件在props中定义了pid,那么父组件只需要在data下的return中定义有这个属性,之后这个属性有任何值子组件都能同步到)

<!-- 子组件定义-->
<script>export default {props: {   //定义了一个pid ,这个pid能接收到 父组件中通信的pid这个属性的值pid : {type: String,default: ''}},data() {...},method{...}},

相关文章:

vue中把弹出层.vue文件注册成组件供其他.vue文件调用的写法

背景&#xff1a;因弹出层多个页面的详情都是一样的&#xff0c;因此把弹出层定义成组件&#xff0c;多次调用 定义组件的过程中出现很多问题&#xff0c;因此再次记录最终成功的写法 一、 简单实现页面调用弹出层组件的打开弹出层方法&#xff1a; 1. 弹出层组件 (in…...

mac 查看GPU使用

首先搜索活动监视器 然后 点击窗口->gpu历史记录 记住不是立马出结果&#xff0c;而是 需要等半分钟左右的...

工业4.0的安全挑战与解决方案

在当今数字化时代&#xff0c;工业4.0已经成为制造业的核心趋势。工业4.0的兴起为生产企业带来了前所未有的效率和灵活性&#xff0c;但与之伴随而来的是一系列的安全挑战。本文将深入探讨工业4.0的安全挑战&#xff0c;并提供一些解决方案&#xff0c;以确保制造业的数字化转型…...

如何查找特定基因集合免疫基因集 炎症基因集

温故而知新&#xff0c;再次看下Msigdb数据库。它更新了很多内容。给我们提供了一个查询基因集的地方。 关注微信&#xff1a;生信小博士 比如纤维化基因集&#xff1a; 打开网址&#xff1a;https://www.gsea-msigdb.org/gsea/msigdb/index.jsp 2.点击search 3.比如我对纤维…...

轮转数组(Java)

大家好我是苏麟 , 这篇文章是凑数的 ... 轮转数组 描述 : 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 题目 : 牛客 NC110 旋转数组: 这里牛客给出了数组长度我们直接用就可以了 . LeetCode 189.轮转数组 : 189. 轮…...

Spring体系结构

Spring体系结构 核心容器 核心容器由 spring-core&#xff0c;spring-beans&#xff0c;spring-context&#xff0c;spring-context-support和spring-expression&#xff08;SpEL&#xff0c;Spring 表达式语言&#xff0c;Spring Expression Language&#xff09;等模块组成&…...

PostgreSQL basebackup备份和恢复

一、概述 备份和恢复分为逻辑和物理&#xff0c;这里指物理备份和恢复。 PG的物理备份依赖basebackup&#xff0c;这差不多就是数据目录的拷贝&#xff0c;还依赖归档日志。 恢复分为完全恢复和PITR恢复&#xff0c;它们都需要归档日志&#xff0c;它们关键的差别是&#xf…...

XTU-OJ 1248-Alice and Bob

Alice和Bob在玩骰子游戏&#xff0c;他们用三颗六面的骰子&#xff0c;游戏规则如下&#xff1a; 点数的优先级是1点最大&#xff0c;其次是6,5,4,3,2。三个骰子点数相同&#xff0c;称为"豹子"&#xff0c;豹子之间按点数优先级比较大小。如果只有两个骰子点数相同&…...

第四章 文件管理 十、文件系统的全局结构

目录 一、文件系统的建立 1、原始磁盘 2、物理格式化后 3、逻辑格式化后 二、文件系统在内存中的结构 三、系统调用背后的过程 一、文件系统的建立 1、原始磁盘 2、物理格式化后 物理格式化&#xff0c;即低级格式化――划分扇区&#xff0c;检测坏扇区&#xff0c;并用…...

【PythonGIS】基于高德Api实现批量地址查询经纬度

之前因为同事需要几千个小区的经纬度信息&#xff0c;所以就帮同事写了一段Python代码&#xff0c;通过调取高德地图的api实现地址查询经纬度这个功能。对于如何使用经纬度查询地址的方法&#xff0c;我之前分享过博文&#xff1a;【Python入门教程】获取图片可视化精准定位&am…...

vue数组中的变更方法和替换方法

变更方法&#xff1a; Vue 能够侦听响应式数组的变更方法&#xff0c;并在它们被调用时触发相关的更新。这些变更方法包括: push&#xff08;&#xff09;:在数组末尾添加一个或者多个元素&#xff0c;返回新的长度。 var arr [1, 2, 3, 4, 5]; // 定义一个数组 arr.push(6…...

Java - 工具类参数初始化

在做第三方接口调用时&#xff0c;经常需要根据不同的环境指定初始化的参数。以下做一个简单的记录。 一、使用static初始化 使用static初始化&#xff0c;仅会初始化一次&#xff0c;但无法从配置文件中获取参数。并且如果写了多个初始化工具类&#xff0c;会互相覆盖。 /**…...

一文搞懂 MineCraft 服务器启动操作和常见问题 2023年10月

文章目录 前言1. 新建文件夹2. 创建 bat 文件3. 编辑 bat 文件4. 启动服务器5. 恭喜完成 文章持续更新中&#xff0c;如果你有问题可以通过 qq 1317699264 获取免费协助&#xff0c;解决的问题将会被更新到本文章中 前言 无论你是使用服务端整合包&#xff0c;还是从上一篇我的…...

第2篇 机器学习基础 —(2)分类和回归

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。机器学习中的分类和回归都是监督学习的问题。分类问题的目标是将输入数据分为不同的类别&#xff0c;而回归问题的目标是预测一个连续的数值。分类问题输出的是物体所属的类别&#xff0c;而回归问题输出的是数值。本节课就…...

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法&#xff1f;当然有&#xff01;绝对有&#xff01;而且我要告诉你&#xff0c;学习的快乐可以媲美游戏的刺激。 小学时代&#xff0c;我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学&#xff0c;我总是迫不及待地打开电脑&a…...

前端访问geoserver服务发生跨域的解决办法,以及利用html2canvas下载绘制的地图

我的业务场景: 需要利用html2canvas下载Openlayers绘制的地图。 预期:可以下载成图片甚至其他格式(svg)文件。 结果:下载下来是个空白图片。 排查错误:请求数据正常回显到页面上,利用html2canvas截取的时候会发生跨域,导致无法绘制。 首先处理tomcat跨域问题 第一步…...

Word docx转html和markdown

Pypandoc使用pandoc来进行各种文本格式的转换。 安装 # 不带pandoc执行库 pip install pypandoc# 自带pandoc pip install pypandoc_binary使用 import pypandoc# convert all markdown files in a chapters/ subdirectory. pypandoc.convert_file(chapters/*.md, docx, out…...

API商品数据接口调用爬虫实战

随着互联网的发展&#xff0c;越来越多的商家开始将自己的商品数据通过API接口对外开放&#xff0c;以供其他开发者使用。这些API接口可以提供丰富的商品数据&#xff0c;包括商品名称、价格、库存、图片等信息。对于爬虫开发者来说&#xff0c;通过调用这些API接口&#xff0c…...

【Python机器学习】零基础掌握GaussianProcessClassifier高斯过程

如何准确预测股票走势,从而在股市中获取更高的收益? 股市波动无常,预测股票走势对于投资者来说总是一个巨大的挑战。通常,人们会使用各种各样的方法和工具,但准确性始终是个问题。那么,有没有一种算法可以帮助解决这个问题呢? “高斯过程分类器(Gaussian Process Cla…...

SQL-正则表达式和约束

文章目录 主要内容一.正则表达式1.操作1代码如下&#xff08;示例&#xff09;: 2.操作2代码如下&#xff08;示例&#xff09;: 3.操作3代码如下&#xff08;示例&#xff09;: 4.操作4代码如下&#xff08;示例&#xff09;: 二.约束1.主键约束 2.自增长约束3.非空约束4.唯一…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...