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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP中for循环语句的几种变型
2007/03/16 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
学习委员自我鉴定
2014/01/13 职场文书
见习期自我鉴定
2014/01/31 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
素质教育标语
2014/06/27 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
卖车协议书范例
2014/09/16 职场文书
节水倡议书
2015/01/19 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书