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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
JavaScript实现音乐导航效果
Nov 19 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php 字符串函数收集
2010/03/29 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php实现删除空目录的方法
2015/03/16 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Python调用Windows命令打印文件
2020/02/07 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
关于Java finally的面试题
2016/04/27 面试题
迎新晚会主持词
2014/03/24 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2015年教师节感言
2015/08/03 职场文书
离婚财产分割协议书
2015/08/11 职场文书
生日寿星公答谢词
2015/09/29 职场文书
python实现过滤敏感词
2021/05/08 Python
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android