【vue，unapi】UniApp引入全局js实现全局方法，全局变量

最新推荐文章于 2024-08-29 09:14:03 发布

熟悉的新风景

最新推荐文章于 2024-08-29 09:14:03 发布

阅读量1.3k

点赞数 2

文章标签： vue.js javascript uni-app

本文链接：https://blog.csdn.net/weixin_44797182/article/details/138187456

版权

创建一个全局文件utils.js


export const baseUrl = "https://www.baidu.com/"


export const fn = () => {
	console.log("demo");
}
export const obj ={
	baseUrl : "https://www.baidu.com/",
	demo(){
		console.log("demo2");
	}
}

第一种：需要使用变量时需要import导入即可使用。

直接在vue页面中使用

<template>
	<view class="page_content">
	
	</view>
</template>

<script>
	import * as utils from '@/static/js/utils.js';
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			console.log(utils);
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

第二种：使用Vue.prototype挂载，直接使用this调用

第一步：在main.js中进行挂载


// 导入全局js
import * as utils2 from '@/static/js/utils.js';
Vue.prototype.$utils = utils;

第二步：在vue页面使用，注意：页面中不要在出现重复的属性或方法名。


// 导入全局js
<template>
	<view class="page_content">

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			console.log(this.$utils.);
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述