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

文章目录

使用全局组件,先声明全局组件
与普通的组件声明不同之处在于
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中的声明的函数

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

相关推荐
一只小风华~39 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
切糕师学AI2 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
书源3 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
计算机学姐3 小时前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
随风飞翔的胖子5 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
iOS阿玮5 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
幻灵尔依5 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子5 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
じòぴé南冸じょうげん6 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
小菜全7 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js