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

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

相关推荐
默魔29 分钟前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
markyankee1011 小时前
Vue 组件系统深度解析
vue.js
bitbitDown1 小时前
从一个Bug到Vue核心原理:聊聊模板作用域的那些事
前端·javascript·vue.js
_advance2 小时前
Vue2 Mixin 深入分析
前端·vue.js
萌新小码农‍2 小时前
Vue集成MarkDown
前端·javascript·vue.js
阿俊-全栈开发12 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
TE-茶叶蛋14 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
小彭努力中14 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
shmily ....15 小时前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
冰天糖葫芦16 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js