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

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

相关推荐
王王碎冰冰3 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼4 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队5 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好5 小时前
pinia从定义到运用
前端·vue.js
代码小学僧5 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
CHB5 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
东坡白菜6 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥9 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT11 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js