vue定义全局变量的方法

本文将为大家详细介绍“vue定义全局变量的方法”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“vue定义全局变量的方法”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

　　在vue项目中如何定义全局变量，全局函数，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数

　　如何定义全局变量

　　原理：

　　设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

　　定义全局变量模块文件：

　　Global.vue文件：

　　<script>

　　constserverSrc='www.baidu.com';

　　consttoken='12345678';

　　consthasEnter=false;

　　constuserSite="中国钓鱼岛";

　　exportdefault

　　{

　　userSite,//用户地址

　　token,//用户token身份

　　serverSrc,//服务器地址

　　hasEnter,//用户登录状态

　　}

　　</script>

　　使用方式1：

　　在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

　　在text1.vue组件中使用：

　　<template>

　　<div>{{token}}</div>

　　</template>

　　<script>

　　importglobal_from'../../components/Global'//引用模块进来

　　exportdefault{

　　name:'text',

　　data(){

　　return{

　　token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token

　　}

　　}

　　}

　　</script>

　　<stylelang="scss"scoped>

　　</style>

如果你能读到这里，小编希望你对“vue定义全局变量的方法”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注亿速云行业资讯频道！