【Vue】全局变量的定义及使用

magvwiz

于 2022-05-31 23:22:21 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/magvwiz/article/details/125075178

本文介绍了在Vue项目中创建全局变量的两种简单方式：一是通过在main.js中挂载到Vue.prototype，二是直接在需要的组件中导入使用。通过创建Global.vue文件定义变量，然后在main.js中引用并挂载，或者在具体组件中导入并赋值给data属性，可以方便地在Vue应用中全局访问这些变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先声明Vue使用全局变量的方法有很多，以下只是个人觉得比较简洁的2种。其中两者的第一步操作相同，即：

创建全局变量文件Global.vue，内容如下：

<script>
    const name = 'ZhangSan'; //名称
    const address = 'No.20, Taihu Road'; //地址

    export default {
        name,
        address
    }
</script>

方法1：在main.js中直接将全局变量挂载到Vue.prototype

import global from '../components/xx/Global'

Vue.prototype.GLOBAL = global;

使用时不用任何多余操作，直接调用this.GLOBAL.name即可。

方法2：在需要使用全局变量的页面引入global再使用

import global from '../components/xx/Global'

data() {

return {

userName: global.name,

userAddress: global.address

}