在vue项目中 实现定义全局变量 全局函数操作


Posted in Javascript onOctober 26, 2020

写在前面:

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波。

定义全局变量

原理:

设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用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-cli是用了webpack做模块化,其他模块化开发,定义全局变量、函数的套路基本上是差不多。上文只是对全局变量,全局函数的希望看完本文能给大家一点帮助。

补充知识:vue中如何在外部调用methods的方法

1.首先定义一个公共的vue组件;

var eventHub = new Vue();

2.在事件当前的组件中,在created中,用$on向公共的组件eventHub传递,translate是自定义的,getCardNum(data)是要在外部调用的方法;

eventHub.$on('translate', function (data) {
    that.getCardNum(data);
   });

3.最后在父组件中,注意负组件要用一个变量保存,

var vm = new Vue({});

4.在父组件中的methods的方法中定义一个方法,在方法里用$emit接收公共组件里的方法;

var vm = new Vue({
  el: '#example',
  data: {
   msg: 'Hello Directive',
   data: {}
  },
  methods: {
   getCardNum: function (data, on) {
    eventHub.$emit('translate', data);
   }
  }
 });

5.最后就可以在vue组件外部,或者文件外部调用getCardNum(data)这个函数,比如在html中就可以 onclick = vm.getCardNum() 这样来调用;vm是父组件

6.注意一定要把父组件的变量名写上

vm.getCardNum();

我用vue开发的过程中,遇到java后台的弹窗页面想要调用我vue组件中的方法,可是后台的弹窗页面并没有在我的vue组件中,其他的页面想要调用的vue中的方法,

只能在父组件中调用,于是研究了很久,最后确定,将组件中的function()方法传递到最上一层的父组件中,将负组件保存在变量中,最后直接在其他页面中调用方法,调用的时候,就不能用@click方法来调用了,

因为后台的页面并不在我的vue组件内部,于是调用就是onclick = vm.getCardNum();这样调用,vm是父组件;

以上这篇在vue项目中 实现定义全局变量 全局函数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 #Javascript
原生js实现简单轮播图
Oct 26 #Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 #Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 #Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 #Javascript
vue下载二进制流图片操作
Oct 26 #Javascript
JavaScript如何操作css
Oct 24 #Javascript
You might like
PHP源代码数组统计count分析
2011/08/02 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
Javascript window对象详解
2014/11/12 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
简述数组与指针的区别
2014/01/02 面试题
给小学生的新年寄语
2014/04/04 职场文书
挂职学习心得体会
2014/09/09 职场文书
汇报材料怎么写
2014/12/30 职场文书
撤诉申请怎么写
2015/05/19 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers