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 相关文章推荐
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
javascript自执行函数
Feb 10 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
jQuery实现飞机大战小游戏
Jul 05 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
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js脚本实现数据去重
2014/11/27 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Cpy和Python的效率对比
2015/03/20 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python读写配置文件操作示例
2019/07/03 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python LMDB库的使用示例
2021/02/14 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
大学活动总结模板
2014/07/10 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
房租涨价通知
2015/04/23 职场文书
春节慰问简报
2015/07/21 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python