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

文章目录

  • 创建组件
  • 在项目的根目录下的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中的声明的函数

这种方式的可以在页面中直接调用组件的函数,不用再在页面中引用组件文章来源地址https://www.uudwc.com/A/aYkjn/

原文地址:https://blog.csdn.net/u010513497/article/details/132809690

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇 2023年09月12日 05:18
opencv基础: 视频,摄像头读取与保存的常用方法
下一篇 2023年09月12日 05:18