vue定义全局变量和全局方法的方法示例


Posted in Javascript onAugust 01, 2018

一、全局引入文件

1、先定义共用组件 common.vue

<script type="text/javascript">
  // 定义一些公共的属性和方法
  const httpUrl = 'http://39.105.17.99:8080/'
  function commonFun() {
    console.log("公共方法")
  }
  // 暴露出这些属性和方法
  export default {
    httpUrl,
    commonFun
  }
</script>

2、在需要使用的地方导入

<script>
// 导入共用组件
import global from './common.vue'
export default {
 data () {
  return {
   username: '',
   password: '',
   // 赋值使用
   globalHttpUrl: global.httpUrl
  }
 },

3、使用

<template>
  {{globalHttpUrl}}
</template>

二、main.js中引入全局变量和方法

1、定义共用组件同上

2、main.js中引入并复制给vue

// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global

3、使用

export default {
 data () {
  return {
   username: '',
   password: '',
   // 赋值使用, 可以使用this变量来访问
   globalHttpUrl: this.COMMON.httpUrl
  }
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
jquery不常用方法汇总
Jul 26 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
node.js遍历目录的方法示例
Aug 01 #Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 #Javascript
Angular路由ui-router配置详解
Aug 01 #Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 #Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 #Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 #Javascript
create-react-app 修改为多入口编译的方法
Aug 01 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
js 函数的副作用分析
2011/08/23 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python标准库sched模块使用指南
2017/07/06 Python
对python3新增的byte类型详解
2018/12/04 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
python 瀑布线指标编写实例
2020/06/03 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
使用django自带的user做外键的方法
2020/11/30 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
六十岁生日答谢词
2014/01/10 职场文书
洗发水广告词
2014/03/13 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
县委务虚会发言材料
2014/10/20 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技