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中的声明的函数

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

相关推荐
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技11 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin11 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击11 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder12 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202613 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737413 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
拼图20913 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
FinelyYang14 小时前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app