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 = true;export default {<!-- --> logo};
第二步:在main.js中引入,并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用;
// 判断是否显示logo const logo = true; export default { logo };
第三步:在需要的模块文件中引入并使用;
页面使用
总结
到此这篇关于Vue全局变量的定义及使用的文章就介绍到这了,更多相关Vue全局变量使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
前端vue面试总问watch和computed区别及建议总结
在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议2023-10-10vue-quill-editor插入图片路径太长问题解决方法
这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01vue使用数组splice方法失效,且总删除最后一项的问题及解决
这篇文章主要介绍了vue使用数组splice方法失效,且总删除最后一项的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论