Vue全局变量的定义及使用方法

 更新时间:2023年09月25日 08:31:57   作者:蓝胖子的多啦A梦  
这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下

首先 声明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
        }
}

二 第一步:单独新建一个全局变量模块文件,模块中定义一些变量初始状态,用export default 暴露出去。

// 判断是否显示logoconst logo &#61; true;export default {<!-- -->  logo};

第二步:在main.js中引入,并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用;

// 判断是否显示logo
const logo = true;
export default {
  logo
};

第三步:在需要的模块文件中引入并使用;

页面使用

总结 

到此这篇关于Vue全局变量的定义及使用的文章就介绍到这了,更多相关Vue全局变量使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue提示框组件vue-notification使用详解

    Vue提示框组件vue-notification使用详解

    这篇文章主要介绍了Vue提示框组件vue-notification使用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • 前端vue面试总问watch和computed区别及建议总结

    前端vue面试总问watch和computed区别及建议总结

    在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议
    2023-10-10
  • vue-quill-editor插入图片路径太长问题解决方法

    vue-quill-editor插入图片路径太长问题解决方法

    这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue使用数组splice方法失效,且总删除最后一项的问题及解决

    vue使用数组splice方法失效,且总删除最后一项的问题及解决

    这篇文章主要介绍了vue使用数组splice方法失效,且总删除最后一项的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue2.0中click点击当前li实现动态切换class

    vue2.0中click点击当前li实现动态切换class

    本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • webpack开发vue-cli的项目实践

    webpack开发vue-cli的项目实践

    本文主要介绍了webpack开发vue-cli的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue删除html内容的标签样式实例

    vue删除html内容的标签样式实例

    今天小编就为大家分享一篇vue删除html内容的标签样式实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在Vue项目中取消ESLint代码检测的步骤讲解

    在Vue项目中取消ESLint代码检测的步骤讲解

    今天小编就为大家分享一篇关于在Vue项目中取消ESLint代码检测的步骤讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Element table 上下移需求的实现

    Element table 上下移需求的实现

    本文主要介绍了Element table 上下移需求的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 如何利用vue-cli监测webpack打包与启动时长

    如何利用vue-cli监测webpack打包与启动时长

    这篇文章主要给大家介绍了关于如何利用vue-cli监测webpack打包与启动时长的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02

最新评论