Vue3中怎么设置全局变量

简介: Vue3中怎么设置全局变量

vue2中设置全局变量:

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组件的信息,后面跟的属性都是跟挂载时候的写法一毛一样,所以比较好记


相关文章
|
11天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
36 5
|
11天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
60 3
|
1天前
|
JavaScript API 开发者
vue3与vue2的区别
vue3与vue2的区别
12 2
|
6天前
|
开发框架 JavaScript 算法
了解vue3的基本特性和底层原理
Vue3的底层原理涵盖了响应式系统的Proxy-based实现、组件的模板编译与渲染更新机制、组合式API带来的逻辑组织变革,以及其他关键特性的具体实现。这些原理共同构成了Vue3强大、高效、灵活的现代前端开发框架基础。
17 2
|
8天前
|
JavaScript
Vue3中props的原理与使用
Vue3中props的原理与使用
|
8天前
|
JavaScript 前端开发 IDE
vue3组件注册
vue3组件注册
|
9天前
|
缓存 JavaScript 前端开发
Vue2与Vue3:深度剖析核心差异与升级亮点
随着Vue.js框架的不断演进,Vue2与Vue3作为两个重要版本,各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别,旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方面的显著差异,以便更好地选择和迁移至适合项目的框架版本。
26 2
|
10天前
|
JavaScript 前端开发 API
Vue 3的响应式系统相比Vue 2有哪些改进?
Vue 3 响应式系统升级亮点:使用 Proxy 替换 `Object.defineProperty`,实现更细粒度的变更跟踪与高性能;自动追踪嵌套属性,无需 `$set` 或深度监听;支持懒响应式,提升初始化性能;改进数组响应式,直接使用原生数组方法;递归侦听器增强灵活性;静态属性追踪;自定义响应式容器;统一 `ref` 和 `reactive` API;引入 `toRefs` 函数;优化响应式 API,如 `markRaw`, `shallowRef` 等,大幅提升效率和开发体验。
|
10天前
|
JavaScript 算法 前端开发
vue3和vue2得区别
Vue 3 优化了性能,引入了更快的虚拟 DOM 算法和模块化编译,提升渲染速度并减小打包文件大小。新引入的 Composition API 提高代码组织灵活性和可维护性。Vue 3 加强了 TypeScript 支持,改进响应式系统,使用 Proxy 实现更细粒度变化跟踪。此外,包体积更小,加载速度更快。尽管与 Vue 2 存在迁移成本,官方提供迁移指南和工具以协助平滑过渡。Vue 3 旨在提供更好的开发体验和效率。
|
11天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
17 7