我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue如何定义全局变量和全局方法实例代码

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue如何定义全局变量和全局方法实例代码

开发中会经常用到一些常用的变量和方法   例如ajax这种

一、给vue定义全局变量

1.定义专用模块来配置全局变量

定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue

// 定义一些公共的属性和方法
const httpUrl = 'http://test.com'
// 暴露出这些属性
export default {
    httpUrl,
}

 引入及使用

<script>
    // 导入共用组件
    import global from './global.vue'
    export default {
        data () {
            return {
                //使用
                globalUrl: global.httpUrl
            }
        }
    }
</script>

2.通过全局变量挂载到Vue.prototype

同上,定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue

// 定义一些公共的属性和方法
const httpUrl = 'http://test.com'
// 暴露出这些属性
export default {
    httpUrl,
}

在main.js中引入并复制给vue

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

组件调用

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

3.使用vuex

安装:

npm install vuex --save

新建store.js文件

import Vue from 'vue' 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export default new Vuex.Store({ 
    state:{ httpUrl:'http://test.com' } 
})

main.js中引入

import store from './store' 
new Vue({
    el: '#app', 
    router, 
    store, 
    components: { App }, 
    template: '<App/>' 
});

组件内调用

console.log(this.$store.state.httpUrl)

二、给vue定义全局方法

1.将方法挂载到 Vue.prototype 上面

简单的函数可以直接写在main.js文件里定义。

// 将方法挂载到vue原型上
Vue.prototype.changeData = function (){
  alert('执行成功');
}

使用方法

//直接通过this运行函数,这里this是vue实例对象
this.changeData();

2. 利用全局混入 mixin

新建一个mixin.js文件

export default {
    data() {
 
    },
    methods: {
        randomString(encode = 36, number = -8) {
            return Math.random() // 生成随机数字,
                .toString(encode) // 转化成36进制
                .slice(number) 
        }
    }
}

// 在项目入口 main.js 里配置

import Vue from 'vue'
import mixin from '@/mixin'
 
Vue.mixin(mixin)

// 在组件中使用

export default {
    mounted() {
        this.randomString()
    }
}

3. 使用插件方式

plugin.js文件,文件位置可以放在跟main.js同一级,方便引用

exports.install = function (Vue, options) {
    Vue.prototype.test = function (){
        console.log('test');
    };
};

main.js引入并使用。

import plugin from './plugin'
Vue.use(plugin);

所有的组件里就可以调用该函数。

this.test();

总结

到此这篇关于vue如何定义全局变量和全局方法的文章就介绍到这了,更多相关vue定义全局变量和全局方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue如何定义全局变量和全局方法实例代码

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue如何定义全局变量和全局方法实例代码

在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,下面这篇文章主要给大家介绍了关于vue如何定义全局变量和全局方法的相关资料,需要的朋友可以参考下
2023-05-17

Vue全局变量和局部变量如何实现

这篇文章主要介绍“Vue全局变量和局部变量如何实现”,在日常操作中,相信很多人在Vue全局变量和局部变量如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue全局变量和局部变量如何实现”的疑惑有所帮助!
2023-07-04

Java 中全局变量该如何定义呢?(java全局变量如何定义)

在Java编程中,全局变量是在整个程序运行过程中都存在的变量,它们可以在程序的多个部分被访问和修改。以下是关于如何定义Java全局变量的详细步骤:一、了解全局变量的概念全局变量也被称为类变量,它们属于类而不是类的实例。这
Java 中全局变量该如何定义呢?(java全局变量如何定义)
Java2024-12-17

python如何定义全局变量

在Python中,可以使用全局变量来在整个程序中共享数据。以下是定义全局变量的几种方法:1. 在函数外部定义全局变量:```pythonglobal_var = 10```2. 在函数内部使用 `global` 关键字声明全局变量:```p
2023-08-12

android如何定义全局变量

在Android中,可以通过以下几种方式定义全局变量:1. 使用静态变量:在一个类中定义一个静态变量,并在需要使用的地方引用该变量。静态变量的生命周期与应用程序的生命周期相同,可以在整个应用程序中访问。例如,在一个名为MyApplicati
2023-08-11

java如何定义全局变量

在Java中,可以使用以下两种方式定义全局变量:1. 在类中定义静态变量:静态变量属于类,而不是属于类的实例对象。可以通过类名直接访问静态变量,而不需要创建类的实例对象。可以使用`static`关键字来定义静态变量。```javapubli
2023-08-29

python全局变量如何定义

在Python中,全局变量可以在函数外部的任意位置定义。在函数内部使用全局变量时,需要使用global关键字声明变量为全局变量。以下是一个示例:# 定义全局变量global_var = 10def my_function():# 使用全
python全局变量如何定义
2024-02-29

vb全局变量如何定义和使用

在VB中,可以使用Public关键字来定义全局变量,以便在整个应用程序中都可以访问和使用。以下是全局变量的定义和使用的示例:1. 在模块级别声明全局变量:Module Module1Public globalVariable As Inte
2023-10-20

Python中如何定义全局变量

今天就跟大家聊聊有关Python中如何定义全局变量,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1. 声明法该方法是直接在当前模块中进行全局变量定义声明,使用global的声明方式,
2023-06-04

C语言全局变量和局部变量的示例代码

本文主要介绍了C语言全局变量和局部变量的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-20

Java 中定义全局变量的方法究竟有哪些?(java定义全局变量的方法是什么)

在Java编程中,全局变量是在整个程序中都可以访问的变量,它们通常在类的级别上定义,而不是在方法内部。定义全局变量可以使多个方法共享数据,提高代码的可读性和可维护性。以下是Java中定义全局变量的几种常见方法:一、实例变量(InstanceVariab
Java 中定义全局变量的方法究竟有哪些?(java定义全局变量的方法是什么)
Java2024-12-19

c语言全局变量如何定义

在C语言中,全局变量的定义需要放在函数外部,即在所有函数的外部声明和定义。全局变量的作用域是整个程序,可以被程序中的任何函数访问和使用。全局变量的定义可以分为两个步骤:1. 在函数外部声明全局变量:在所有函数的外部使用关键字`extern`
2023-09-04

asp.net全局变量的实例方法

asp.net获取全局变量方法 第一种,首先打开visual studio,新建web项目。其次,在新建的web项目中,打开“web.config”文件,在此文件中添加关键字“”标记,如下图所示。第三,在“
2022-06-07

asp定义全局变量的方法是什么

在ASP中,可以使用Session对象来定义全局变量。全局变量是在整个应用程序中都可以访问的变量,多个页面之间可以共享这些变量的值。要定义一个全局变量,可以使用以下语法:```aspSession("变量名称") = 值%>```例如,要定
2023-09-25

mfc定义全局变量的方法是什么

在MFC中,可以通过以下两种方法定义全局变量:在CWinApp派生类中定义:可以在CWinApp派生类的头文件中声明全局变量,并在源文件中进行定义和初始化。例如:// MyApp.hclass CMyApp : public CWinAp
2023-10-21

编程热搜

目录