Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

您所在的位置：网站首页 › vue打包js文件中_resolved和_where › Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

2023-03-30 18:27| 来源: 网络整理| 查看: 265

在.vue后缀名的文件，和.js后缀名的文件里，使用全局变量的语法是不一样的。.vue模板文件可以直接访问挂载在Vue实例上的全局对象，而普通的.js文件访问不到。

定义全局变量

在任意路径下创建一个.vue文件。我这里创建在src/config路径下，取名为Global.vue

Global.vue

/** * 统一认证服务器地址 */ // const ssoServer = "https://iamtest.by.gov.cn:8083/idp"; // 测试环境 const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境 /** * 统一认证登出地址 */ // const ssoServerLogout = "https://iamtest.by.gov.cn:8083/apphub/logout"; // 测试环境 const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境 export default { ssoServer, ssoServerLogout }

我这里定义的是常量。变量只是把const换成let，别的都一样。

export default后面必须把所有全局变量名又写一遍，属于boilerplate代码，没办法。

main.js是Vue项目的入口文件，在main.js里面把全局变量挂载到Vue实例上。

main.js

import global_ from './config/Global' // 这个路径是相对于main.js的相对路径 Vue.prototype.GLOBAL = global_

这样挂载完了以后，我们有两个办法去访问。

通过Vue.prototype对象访问import Vue from 'vue' let a = Vue.prototype.GLOBAL.ssoServer

这种写法在.vue文件和.js文件中都可以使用。

通过this关键字访问let a = this.GLOBAL.ssoServer

这种写法只能在.vue文件中使用。.vue模板文件中，this关键字可以访问到Vue.prototype上挂载的所有对象，所以写this就相当于写Vue.prototype。

其实两种方法没什么区别，你全部用第一种方法也可以。第二种方法只是稍微简洁一些而已。

定义全局方法

在任意.js文件里使用export function语法，即可让这个方法变成全局方法。

common.js

export function 个人号码加密 (号码) { let length = 号码.length if (length

【本文地址】

Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

今日新闻

推荐新闻