vue定义全局变量和全局方法的方法示例
更新时间：2018年08月01日 13:39:23 作者：zxc19890923
这篇文章主要介绍了vue定义全局变量和全局方法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、全局引入文件
1、先定义共用组件 common.vue
<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出这些属性和方法
export default {
httpUrl,
commonFun
}
</script>
2、在需要使用的地方导入
<script>
// 导入共用组件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 赋值使用
globalHttpUrl: global.httpUrl
}
},
3、使用
<template>
{{globalHttpUrl}}
</template>
二、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
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何使用vue实现视频全屏切换的功能,文中的示例代码讲解详细, 具有一定的借鉴价值,有需要的小伙伴可以参考一下2023-11-11
今天小编就为大家分享一篇基于Vue 服务端Cookies删除的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue3的vue-router超详细使用,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue3计算属性是如何实现的，对于任何包含响应式数据的复杂逻辑，我们都应该使用计算属性，更多相关内容需要的小伙伴可以参考一下2022-08-08
在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以在工程开始的来封装一下axios,下面这篇文章主要给大家介绍了关于axios请求二次封装之避免重复发送请求的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue3实现ai聊天对话框功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-12-12
在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题,许多开发者会直接在index.html中加入类似以下代码来解决缓存问题,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要为大家介绍了vue之mixin的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章为大家详细介绍了vue.js中$watch的用法，文中给出了示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以一起看看吧。2016-10-10
Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
最新评论