vue3中setup函数获取app.config.globalProperties中的全局变量

最新推荐文章于 2024-06-06 10:38:06 发布

Usha

最新推荐文章于 2024-06-06 10:38:06 发布

阅读量1k

点赞数 5

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/xxeryjy/article/details/135975229

版权

import { ref, getCurrentInstance } from 'vue';  
const instance = getCurrentInstance();  
const myGlobalVar = ref(instance.appContext.config.globalProperties.$myGlobalVar); 
console.log(myGlobalVar.value); // 输出 "Hello, world!"

记一下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Usha

关注关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue3中setup函数获取app.config.globalProperties中的全局变量

【代码】vue3中setup函数获取app.config.globalProperties中的全局变量。
复制链接

扫一扫

Vue-cli3项目配置Vue.config.js实战记录

10-18

相比之前的版本，Vue CLI 3 在项目结构上进行了简化，不再包含 `build` 和 `config` 文件夹，而是将大部分配置集中到了 `vue.config.js` 文件中。这个文件位于项目的根目录下，允许开发者自定义 Webpack 配置，以...

vue在App.vue文件中监听路由变化刷新页面操作

10-14

主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

vue3 setup种使用全局变量 globalProperties

qq_45223390的博客

10-18

4703

getCurrentInstance 支持访问内部组件实例。 1.main.ts使用 app.config.globalProperties.$filter = { foo() { return 123 }, bar() { console.log("我是bar") return "我是bar" } } 2.在template中使用 {{ $filter.foo() }} 3.在setup中使用 const internalInstance = getCurre

在vue里面设置全局变量或数据的方法

11-28

实例如下： const MyPlugin = { // install方法是必需的 // // 包含两个参数：Vue 构造器，一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件，在引入到需要的页面里面，就可以用vue实例取到相应数据，像以下use后，取数据时和取每个模块里面的data里面的数据方法是一样的 import MyPligin from

vue3设置全局变量并获取全局响应式变量窗口大小

热门推荐

浩星

03-02

2万+

前言： vue3.0中的全局定义属性值和2.0是不一样的，是使用了globalProperties，而且跟我们2.0中可以用 this.+我们挂载的属性名的用法相比，我们3.0的使用方法是不一样的，这里总结下 2.0 main.js中 import api from './api' // 导入api接口 Vue.prototype.$api = api Vue.prototype.$abc = 111 页面上： this.$api.user... let abc...

获取App.config配置文件中的参数值

10-23

介绍了获取app.config配置文件中的参数值方法，首先是要添加System.Configuration引用，其次类文件中必须有 using System.Configuration;再次App.config添加，最后向App.config配置文件添加参数，下面通过列子给大家...

vue - vue.config.js中devServer配置方式

10-16

在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口...

详解如何配置vue-cli3.0的vue.config.js

12-02

本文介绍了如何配置vue-cli3.0的vue.config.js，分享给大家，具体如下： vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由...

Vue3，在组件中引用全局变量的方法

qq_45649001的博客

11-20

5230

Vue3，在组件中引用全局变量的方法

Vue3全局属性app.config.globalProperties

小马甲

01-01

2863

在main.ts文件中设置//全局方法app.config.globalProperties.$type = '类型';本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。

Vue3使用Pinia获取全局状态变量

m0_73481765的博客

01-11

1047

Pinia 是 Vue 3 的状态管理库，用于替代 Vuex。使用 Pinia，你可以轻松地在 Vue 3 应用中管理全局状态。

Vue3中的公共数据配置globalProperties getCurrentInstance、网络代理配置

看见小狮子没

09-21

1万+

1、

vue3.0 setup组合式使用全局变量

iphonepl的博客

03-06

580

这样就可以使用定义的全局变量util了~~~

vue3全局属性/方法的创建及使用--app.config.globalProperties(支持ts)

m0_71537867的博客

04-21

3151

有时一些属性值或方法想要在很多个组件中被使用，且想要进行统一管理，此时就可以将这些属性值或方法注册在能够被应用内所有组件实例访问到的对象中。我们将想要全局使用的属性或方法注册在app.config.globalProperties对象中，就可以在应用内的任意组件中使用。

Vue3 app.config.globalProperties 全局属性如何在setup中使用

weixin_51232434的博客

04-16

848

这样可以拿到属性并进行逻辑处理，但是如何在setup中渲染到模板中进行展示呢？1. 在main.ts中进行定义全局变量或函数。2. 在组件中进行使用。

Vue3中通过app.config.globalProperties使用全局变量的示例

08-18

在 Vue 3 中，你可以使用 `app.config.globalProperties` 来定义和使用全局变量。下面是一个示例，展示如何在 Vue 3 中使用 `app.config.globalProperties` 来定义和访问全局变量： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 定义全局变量 app.config.globalProperties.$globalVariable = 'Hello, world!'; app.mount('#app'); ``` 在上述示例中，我们在 `main.js` 文件中使用 `app.config.globalProperties` 来定义全局变量 `$globalVariable`，并将其设置为 `'Hello, world!'`。然后，在组件中可以通过 `this.$globalVariable` 来访问全局变量： ```vue <template> <div> <p>{{ $globalVariable }}</p> <button @click="updateGlobalVariable">Update Global Variable</button> </div> </template> <script> export default { methods: { updateGlobalVariable() { this.$globalVariable = 'Updated Global Variable'; } } }; </script> ``` 在上述示例的组件中，我们通过 `this.$globalVariable` 来访问全局变量，并可以在方法中更新全局变量的值。通过 `app.config.globalProperties`，可以在 Vue 3 中方便地定义和使用全局变量。但是请注意，滥用全局变量可能会导致代码可维护性和可测试性的问题，所以请谨慎使用。