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

更新时间：2018年08月01日 13:39:23 作者：zxc19890923

这篇文章主要介绍了vue定义全局变量和全局方法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、全局引入文件

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
  }
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下
2023-04-04
VUE3之Non-Props属性的具体使用
本文主要介绍了VUE3之Non-Props属性的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue.js自定义事件的表单输入组件方法
下面小编就为大家分享一篇Vue.js自定义事件的表单输入组件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue+springboot前后端分离实现单点登录跨域问题解决方法
这篇文章主要介绍了vue+springboot前后端分离实现单点登录跨域问题的解决方法,需要的朋友可以参考下
2018-01-01
详解Vue的异步更新实现原理
这篇文章主要介绍了Vue的异步更新实现原理，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
Vue前端项目部署IIS的实现
这篇文章主要介绍了Vue前端项目部署IIS的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
详解Vue的mixin策略
这篇文章主要介绍了Vue的mixin策略的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-11-11
Vue SSR 组件加载问题
这篇文章主要介绍了Vue SSR 组件加载问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-05-05
Vue3中内置组件Teleport的基本使用与典型案例
Teleport是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术,下面这篇文章主要给大家介绍了关于Vue3中内置组件Teleport的基本使用与典型案例的相关资料,需要的朋友可以参考下
2023-04-04
超简单易懂的vue组件传值
这篇文章主要为大家详细介绍了vue组件传值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03