全局变量 全局函数vue 方法
2018-01-02 10:26
856 查看
定义全局变量
原理:
设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。全局变量模块文件:
Global.vue文件:<script> const serverSrc='www.baidu.com'; const token='12345678'; const hasEnter=false; const userSite="中国钓鱼岛"; export default { userSite,//用户地址 token,//用户token身份 serverSrc,//服务器地址 hasEnter,//用户登录状态 } </script>
使用方式1:
在需要的地方引用进全局变量模块文件,然后通过文件里面的变量名字获取全局变量参数值。在text1.vue组件中使用:
<template> <div>{{ token }}</div> </template> <script> import global_ from '../../components/Global'//引用模块进来 export default { name: 'text', data () { return { token:global_.token,//将全局变量赋值到data里面,也可以直接使用global_.token } } } </script> <style lang="scss" scoped> </style>
使用方式2:
在程序入口的main.js文件里面,将上面那个Global.vue文件挂载到Vue.prototype。import global_ from './components/Global'//引用文件 Vue.prototype.GLOBAL = global_//挂载到Vue实例上面
接着在整个项目中不需要再通过引用Global.vue模块文件,直接通过this就可以直接访问Global文件里面定义的全局变量。
text2.vue:
<template> <div>{{ token }}</div> </template> <script> export default { name: 'text', data () { return { token:this.GLOBAL.token,//直接通过this访问全局变量。 } } } </script> <style lang="scss" scoped> </style>
Vuex也可以设置全局变量:
通过vuex来存放全局变量,这里东西比较多,也相对复杂一些,有兴趣的小伙伴们,可自行查阅资料,折腾一波、定义全局函数
原理
新建一个模块文件,然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面,通过this.函数名,来运行函数。1. 在main.js里面直接写函数
简单的函数可以直接在main.js里面直接写Vue.prototype.changeData = function (){//changeData是函数名 alert('执行成功'); }
组件中调用:
this.changeData();//直接通过this运行函数
2. 写一个模块文件,挂载到main.js上面。
base.js文件,文件位置可以放在跟main.js同一级,方便引用exports.install = function (Vue, options) { Vue.prototype.text1 = function (){//全局函数1 alert('执行成功1'); }; Vue.prototype.text2 = function (){//全局函数2 alert('执行成功2'); }; };
main.js入口文件:
import base from './base'//引用 Vue.use(base);//将全局函数当做插件来进行注册
组件里面调用:
this.text1(); this.text2();
相关文章推荐
- vue中注册全局函数的方法
- oc08--局部变量,全局变量,函数方法的区别
- MFC中定义全局变量和全局函数的方法
- MFC中定义全局变量和全局函数的方法
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
- vue中接口域名配置为全局变量的实现方法
- VUE-cli全局变量,路由跳转引起计算属性函数的执行
- php部分(查看文件、建立站点、语法变量、变量的几个方法、“全局局部变量的调用”、static、函数参数的作用域);
- vue全局函数,公共方法的抽离
- Vue引入sass并配置全局变量的方法
- 在MFC中添加全局变量和全局函数的方法
- vbscript访问函数外类变量和全局变量的方法
- 在C++工程中main函数之前跑代码的廉价方法(使用全局变量和全局函数)
- JavaScript基础(基本语法:变量、语句、数组、函数、对象、全局方法以及js与java不同,js与html关联)
- vue定义全局变量和全局方法的方法示例
- C++是定义全局变量和函数常用方法.
- MFC中定义全局变量和全局函数的方法
- MFC中定义全局变量和全局函数的方法
- 浅谈在vue项目中如何定义全局变量和全局函数
- MFC中定义全局变量和全局函数的方法