在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 相关文章推荐
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript字符串函数汇总
Dec 06 Javascript
js倒计时简单实现代码
Aug 11 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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 缓冲的免费实现方法
2006/10/09 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
C和C++经典笔试题附答案解析
2014/08/18 面试题
《珍珠泉》教学反思
2014/02/20 职场文书
校庆活动方案
2014/03/31 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
新入职员工工作总结
2015/10/15 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Golang日志包的使用
2022/04/20 Golang