uniapp 小程序 全局弹窗 每个需要使用的页面都不用再引用

news2024/11/17 15:44:53

文章目录

  • 创建组件
  • 在项目的根目录下的vue.config.vue中配置
  • 页面中使用

使用全局组件,先声明全局组件
与普通的组件声明不同之处在于
1:目录形式
2:声明引用方式

创建组件

在components目录中创建组件目录/组件vue,如下
注意需要同名的目录
在这里插入图片描述

在项目的根目录下的vue.config.vue中配置

module.exports = {
	transpileDependencies: ['uview-ui'],
	configureWebpack: {
		devServer: {
			disableHostCheck: true
		}
	},
	chainWebpack: config => {
		config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
			const compile = options.compiler.compile
			options.compiler.compile = (template, ...args) => {
				if (args[0].resourcePath.match(/^pages/)) {
					template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
		    <new-gift-coupon ref="new-gift-coupon" />
		  `)
				}
				return compile(template, ...args)
			}
			return options
		})
	}

}

页面中使用

this.$refs['new-gift-coupon'].show()

show函数是组件的methods中的声明的函数

这种方式的可以在页面中直接调用组件的函数,不用再在页面中引用组件

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringMVC之综合案例:参数传递,向页面传参,页面跳转

参数传递向页面传参页面跳转 1.参数传递 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"htt…

【PyTorch 08】如果要手动安装对应的包

例如有时候我们要下载 PyG &#xff0c;但是需要手动下载&#xff0c;需要进行以下步骤&#xff1a; 网站链接&#xff1a;https://data.pyg.org/whl/ 首先查看当前安装好的Pytorch版本和对应的cuda版本 1. pip list&#xff1a;查看torch版本 2. torch.version.cuda&#xf…

3.4 栈与递归

3.4.1 采用递归算法解决问题 3.4 栈与递归的关系 栈和递归之间有着紧密的关系&#xff0c;特别是在算法和程序设计中。栈作为一种数据结构&#xff0c;可以有效地支持递归算法的实现。本节我们将详细讨论栈在递归算法中的作用及其在程序设计中的重要性。 1. 递归算法的基本概…

C#和.NET FrameWork概述

.NET FrameWork是什么&#xff1f; .NET FrameWork是由微软开发的一种面相对象的环境框架&#xff0c;特点如下&#xff1a; ①多平台&#xff1a;可在各种计算机、服务器、手机上运行。 ②标准化通讯协议&#xff1a;如XML、HTTP、JSON等。 ③安全性&#xff1a;CLR检查并…

通过实例学习鸿蒙静态库的创建与使用

简要介绍 静态共享包HAR&#xff08;Harmony Archive&#xff09;&#xff0c;是为了实现代码和资源的共享&#xff0c;可以包含代码、C库、资源和配置文件&#xff0c;随使用方一起编译&#xff0c;如果在多个应用中进行调用&#xff0c;就需要有多个HAR&#xff0c;和应用绑…

修改Tomcat的默认端口号

1、找到Tomcat的安装路径。 2、打开conf文件夹。 3、用记事本打开server.xml文件 4、找到 <Connector port"8080" protocol"HTTP/1.1"&#xff0c;其中的8080就是tomcat的默认端口&#xff0c;将其修改为你需要的端口即可。

图书管理信息系统分析与设计

一、系统开发的可行性分析 &#xff08;一&#xff09;系统背景.必要性及意义 随着社会经济的迅速发展和科学技术的全面进步&#xff0c;计算机事业的飞速发展&#xff0c;以计算机与通信技术为基础的信息系统正处于蓬勃发展的时期。随着经济文化水平的显著提高&#xff0c;人…

数据接口工程对接BI可视化大屏(六)接收前台数据

文章目录 第6章 接收前台数据6.1 模拟数据6.2 接收数据6.2.1 编写Dao6.2.2 编写ServiceImpl6.2.3 编写Controller6.2.4 验证 后记 第6章 接收前台数据 在工作中也会遇到需要接收前台发送数据&#xff0c;进行存储的情况。这里以接收日志服务器的日志数据保存到kafka为例。 6.…

久运恒远聚焦物业多营渠道致力服务美好生活

随着社会的不断发展和人民生活水平的不断提高&#xff0c;物业行业已经逐渐向深度服务化方向调整&#xff0c;物业的多种经营体系也成为品牌关注和布局的重要销售渠道。久运恒远&#xff08;北京&#xff09;企业管理有限公司聚焦物业多营体系&#xff0c;整合资源&#xff0c;…

CTFHub | 综合过滤练习

0x00 前言 CTFHub 专注网络安全、信息安全、白帽子技术的在线学习&#xff0c;实训平台。提供优质的赛事及学习服务&#xff0c;拥有完善的题目环境及配套 writeup &#xff0c;降低 CTF 学习入门门槛&#xff0c;快速帮助选手成长&#xff0c;跟随主流比赛潮流。 0x01 题目描述…

简单5步骤搞定windows server2019 配置IIS支持PHP

测试成功&#xff0c;记录一笔&#xff0c;感谢网上各位大佬的技术支持。 一、安装vcredist_x64.exe 否则可能会出现 FastCGI进程意外退出 二、IIS开启CGI&#xff08;可能需要重启&#xff09; 控制面板&#xff0c;启用或关闭windows程序&#xff0c;IIS--应用程序开发--CGI…

61、SpringBoot -----跨域资源的设置----局部设置和全局设置

★ 跨域资源共享的意义 ▲ 在前后端分离的开发架构中&#xff0c;前端应用和后端应用往往是彻底隔离的&#xff0c;二者不在同一个应用服务器内、甚至不再同一台物理节点上。 因此前端应用和后端应用就不在同一个域里。▲ 在这种架构下&#xff0c;前端应用可能采用前端框架&a…

Linux入门教程||Linux系统目录结构

登录系统后&#xff0c;在当前命令窗口下输入命令&#xff1a; ls / 你会看到如下图所示: 树状目录结构&#xff1a; 以下是对这些目录的解释&#xff1a; /bin&#xff1a; bin是Binary的缩写, 这个目录存放着最经常使用的命令。 /boot&#xff1a; 这里存放的是启动Linux时…

【AIGC专题】Stable Diffusion 从入门到企业级实战0601

一、前言 本章是《Stable Diffusion 从入门到企业级实战》系列的第六部分Prompt专题篇《Stable Diffusion Prompt 专题》第01节 《Stable Diffusion Prompt 通用画风操作实战》。本部分内容&#xff0c;位于整个Stable Diffusion生态体系的位置如下图黄色部分所示&#xff1a;…

RJ45水晶头网线顺序出错排查

线序 网线水晶头RJ45常用的线序标准ANSI / TIA-568定义了T568A与T568B两种线序&#xff0c;一般使用T568B&#xff0c;水晶头8个孔对应的8条线颜色如下图&#xff1a; 那1至8的编号&#xff0c;是从水晶头哪一面为参考呢&#xff0c;如下图&#xff0c;是水晶头金手指一面&am…

SAP ABAP基础知识 访问外部数据库-开发篇

前言 本文主要介绍通过ABAP语言访问外部数据库的几种方式 一、外部数据库配置 本文示例中的代码访问了两个外部数据库 MTD : 外部oracle数据库,其中示例表 ZTTEMP 字段( ZZTNO,WERKS) S4Q : 外部HANA数据库(开发系统访问测试系统的数据库), 使用表USR02,ZTTEMP 二、ABAP访问…

YOLO物体检测系列2:YOLOV2整体解读

1、YOLOV1 优点&#xff1a;快速&#xff0c;简单&#xff01;问题1&#xff1a;每个Cell只预测一个类别&#xff0c;如果重叠无法解决问题2&#xff1a;小物体检测效果一般&#xff0c;长宽比可选的但单一 YOLOV2更快&#xff01;更强&#xff01; 2、Batch Normalization …

群晖NAS教程(二十五)、利用web station安装nextcloud

群晖NAS教程(二十五)、利用web station安装nextcloud 一、下载离线安装包文件 下载地址https://download.nextcloud.com/server/releases/&#xff0c;我们选择zip格式的&#xff0c;下载这个latest-27.zip的最新版的。 把它加压缩到群辉web/hepnextcloud路径下&#xff0c;并…

算法:贪心---跳一跳

1、题目&#xff1a; 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 2…

包管理工具--》其他包管理器之cnpm、pnpm、nvm

包管理工具系列文章目录 一、包管理工具--》npm的配置及使用&#xff08;一&#xff09; 二、包管理工具--》npm的配置及使用&#xff08;二&#xff09; 三、包管理工具--》发布一个自己的npm包 四、包管理工具--》yarn的配置及使用 五、包管理工具--》其他包管理器之cnpm…