vue 为全局变量赋值_vue中如何来定义全局变量和全局方法？（代码）

这篇文章给大家介绍的内容是关于vue中如何来定义全局变量和全局方法？(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、全局引入文件

1、先定义共用组件 common.vue

// 定义一些公共的属性和方法

const httpUrl = 'http://39.105.17.99:8080/'

function commonFun() {

console.log("公共方法")

}

// 暴露出这些属性和方法

export default {

httpUrl,

commonFun

}

2、在需要使用的地方导入

// 导入共用组件

import global from './common.vue'

export default {

data () {

return {

username: '',

password: '',

// 赋值使用

globalHttpUrl: global.httpUrl

}

},

3、使用

{{globalHttpUrl}}

二、main.js中引入全局变量和方法

1、定义共用组件同上

2、main.js中引入并复制给vue// 导入共用组件

import global from './common.vue'

Vue.prototype.COMMON = global

3、使用export default {

data () {

return {

username: '',

password: '',

// 赋值使用, 可以使用this变量来访问

globalHttpUrl: this.COMMON.httpUrl

}

},

总结 实例

common.vue文件，项目中的公共，或者全局文件

vue-resource需要先配置一下 main.js// 配置使用formDate

Vue.http.options.emulateHTTP = true

Vue.http.options.emulateJSON = true

// 定义一些公共的属性和方法

const httpUrl = 'http://39.105.17.99:8080/'

function promiseFun (url, params) {

return new Promise((resolve, reject) => {

this.$http.post(this.globalHttpUrl + url, params).then(

(res) => {

resolve(res.json())

},

(err) => {

reject(err.json())

}

)

})

}

// 暴露出这些属性和方法

export default {

httpUrl,

promiseFun

}

使用export default {

data () {

return {

username: '',

password: '',

globalHttpUrl: global.httpUrl,

promiseFun: global.promiseFun

}

},

methods: {

loginInFun () {

localStorage.setItem('userId', '00001')

let params = {

telphone: this.username,

password: this.password

}

this.promiseFun('itArtison/user/login', params).then(

(res) => {

console.log(res)

this.$Message.info(res.message)

// 登录成功过以后，这里从初session

// 先将对象转换为json字符串

localStorage.setItem('userInfo', JSON.stringify(res.data))

if (res.code === '0000') {

this.$router.push({'name': 'Home'})

}

},

(err) => {

console.log(err)

this.$Message.info(err.message)

}

)

}

}

相关文章推荐：

vue组件如何挂载到全局？Vue组件挂载到全局的方法介绍(代码)

vue项目中定义全局变量和全局函数详解

关于VUE定义全局变量的几种方法详解