Vue3定义全局变量/方法

vue3定义全局变量

在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，然后通过this.$xxx来获取全局变量。

但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的，因此按照官方文档我们使用下面方法来定义全局变量：

首先在main.js里写一个我们要定义的全局变量（定义全局方法也一样哦），比如一个系统id吧

app.config.globalProperties.$systemId = "10"

现在在页面里需要使用这个变量，只需要从vue中引入getCurrentInstance即可，注意不能在页面中使用this.

<script lang="ts" setup>
import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10
</script>

这里 getCurrentInstance()?.appContext 就是获得app组件的信息，后面跟的属性都是跟挂载时候的写法一毛一样，所以比较好记

Vue3定义全局变量/方法相关推荐

Vue3 定义全局变量
在main.js文件中 import { createApp } from 'vue';const app = createApp(App); app.config.globalProperties. ...
uniapp定义全局变量方法
当我们开发uniapp的时候,会想到全局变量,全端存储到全局中,调用起来非常方便 main.js代码 import Vue from 'vue' import App from './App' Vue ...
MFC中定义全局变量和全局函数的方法
使用Visual C++6.0 中的MFC 基本应用时, 由于 MFC 制作的工程由很多文件构成, 它不能象一般C++程序那样随意在类外定义全局变量, 那样有时会在运行程序时出现问. 在软件开发过程中 ...
angular中如何定义全局变量_angularjs 设置全局变量的方法
angularjs 设置全局变量的3种方法 angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng- ...
C/C++定义全局变量/常量几种方法的区别
在讨论全局变量之前我们先要明白几个基本的概念: 1. 编译单元(模块): 在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LINK E ...
c语言中的全局变量类型,c++全局变量 C/C++中定义全局变量的几种方法及区别
c语言中全局变量主要是定义在所有函数之外的变量,在程序执行的过程中一直有效,可以被任何函数引用.赋值,想要定义它,一般将其定义在主函数main()之外就行. 例如下面的程序段,变量m就是一个全局变量, ...
js定义全局变量 vue页面_vue + typescript，定义全局变量或者方法
众所周知,在 vue中,如果想定义一个全局变量的方法很简单,直接在 vue的原型上挂载属性或者方法即可. 但是,加上了typescript之后, Vue.prototype.$xxx = xxx 这 ...
vue项目中定义全局变量、函数的几种方法
定义全局变量原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块 1.使用 ...
js定义全局变量 vue页面_vue项目中定义全局变量、函数的几种方法
前言在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等.这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解.简单 ...

Vue3定义全局变量/方法

vue3定义全局变量

Vue3定义全局变量/方法相关推荐

最新文章

热门文章