全局变量 全局函数vue 方法
定义全局变量
原理:
设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用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 方法的更多相关文章
- 在vue项目中 如何定义全局变量 全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...
- 在 Vuejs 项目中如何定义全局变量 全局函数
在 Vuejs 项目中如何定义全局变量 全局函数 在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录 token, 用户的地址信息等,这时候就需要设置一波全局变量和 ...
- Flask jinja2 全局函数,宏
内置全局函数 dict()函数,方便生成字典型变量 {% set user = dict(name='Mike',age=15) %} <p>{{ user | tojson | safe ...
- C++(三十三) — 全局函数、成员函数的区别
区别: (1)全局函数的参数个数,比局部函数要多一个: (2)二者都可,返回元素.返回引用. class test { public: test(int a, int b) { this->a ...
- C++之全局函数和成员函数互相转换
解析:成员函数会用this指针自动隐藏第一个操作数(左操作数) 1.把全局函数转化成成员函数,通过this指针隐藏左操作数. Test add(Test &t1,Test &t2) ...
- vue 定义全局函数和变量
背景 最近我在整一个网站,介绍一些有意思的网站和实用工具的网站并且把他们收集起来,网站刚建有些不成熟希望给点意见 我用的是前端框架的vue, 但是我没有打包,直接甩到服务器上了, 不想扯了, 步骤 1 ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- 在MFC下如何定义全局变量和全局函数
用MFC制作的工程由很多文件构成,它不能象一般C++程序那样随意在类外定义全局变量,在这里要想定义能被工程内多个文件共享的全局变量和函数必须用一些特殊方法才行.实际上有多种方法可以实现,这里只介绍两种 ...
- vue 定义全局函数
方法一:main.js 注入 (1)在main.js中写入函数 Vue.prototype.changeData = function (){ alert('执行成功'); } (2)在所有组件里可调 ...
随机推荐
- Android开发——用户在屏幕上的手势识别
个定点决定.四个属性分别为left(1),top(2),right(3),bottom(4). 数字为图上标出的距离.显然这四个属性是相对于父容器来定的,均可以通过get()方法获取. 因此很容易得出 ...
- Aizu 2560 Point Distance FFT
题意: 有一个\(N \times N\)的方阵,第\(x\)行第\(y\)列有\(C_{x,y}\)个点\((0 \leq C_{x,y} \leq 9)\). 任选两个不同的点,求两点欧几里德距离 ...
- Nodejs-文件流
1.什么是流? 流是程序输入输出的一个连续的字节序列. 有文件流,网络流,设备(例如鼠标,键盘,磁盘,调制解调器和打印机)的输入输出都是用流来处理的. 任何数据的最根本表现形式都是二进制. 读取文件 ...
- 37、iamgeview 图层叠加
1 Drawable d1 = new BitmapDrawable(circleBitmap); Drawable d2 = login.this.getResources().getDrawabl ...
- 【Single Number】cpp
题目: Given an array of integers, every element appears twice except for one. Find that single one. No ...
- phpmyadmin4.8.1后台getshell
phpmyadmin4.8.1后台getshell 包含文件进行getshell 姿势: ① 建立数据库的,新建表,字段名为一句话木马. 会生成对应的数据库文件,相应文件的路径查看 select @@ ...
- python 学习分享-面向对象
好激动,学了四个月的面向对象,我终于勉勉强强的把作业做完了,现在来重构我的面向对象的知识! 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 ...
- [19/02/23]ToolsShare 工具分享 VPNTethering Android (Root Required)
To be short, VPN Tethering is a quite useful tool when you want to share your private network with s ...
- schema.xml属性概念
# schema 定义逻辑库 checkSQLschema 当该值设置为 true 时,如果我们执行语句**select * from TESTDB.travelrecord;**则 MyCat 会 ...
- Unity3D_异步加载场景(进度条)
创建两个场景:现在的场景“NowScene”,要加载的场景“LoadScene”: “NowScene”如图所示,“LoadScene”任意: 创建脚本“AsyncLoadScene”,复制如下代码, ...