一种VUE3全局变量使用方式

原创 已于 2023-01-06 00:25:47 修改 · 696 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

于 2022-12-13 14:11:22 首次发布
本文介绍如何在Vue应用中通过getCurrentInstance及provide/inject API来传递全局属性，确保这些属性可以在任意子孙组件中被访问。

App.vue

var appContext = getCurrentInstance()?.appContext;
var globalProperties = appContext.config.globalProperties;

provide('globalProperties', globalProperties)

任意子孙组件

var globalProperties = inject('globalProperties');

globalProperties.XXX

Vue3-47-Pinia-修改全局状态变量值的方式
northcastle的博客
01-10 1118
vue3中使用Pinia时，修改 全局状态的值的方式整理
Vue中全局变量的定义和使用
12-10
1.工作中遇到的两类问题 ————————————...2.2 使用全局变量法管理状态与字段值 轻量，简单。 故本文使用全局变量法解决1中提出的两个问题 3.具体实现 —————————————————————————
Vue3版本中全局变量改动
qq_39562937的博客
08-10 2041
Vue3中全局变量注册
Vue3如何绑定全局方法和变量
qq_54548545的博客
06-19 1942
Vue3如何绑定全局方法和变量
Vue3中怎么设置全局变量
Clover ‘s Blog
03-16 4807
Vue3中怎么设置全局变量
vue3改变全局数据
weixin_66527679的博客
06-18 672
需要将数据设置为响应式。
详解VUE 定义全局变量的几种实现方式
11-26
另一种方法是将全局变量模块（如`Global.js`）中的内容挂载到`Vue.prototype`对象上。这样，全局变量和函数就成为了Vue实例的原型属性，所有Vue组件都可以直接通过`this`访问。在`main.js`的入口文件中，我们引入`...
vue2 全局变量的设置方法
08-27
Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。 1. 全局变量专用模块 全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。例如，...
在vue里面设置全局变量或数据的方法
11-28
Vue插件是一种扩展Vue功能的方式，它可以通过`Vue.use()`方法安装。我们可以创建一个自定义的插件，用来定义全局变量。以下是一个创建Vue插件并设置全局变量的步骤： 1. **创建插件对象** 首先，创建一个...
VUE3添加全局变量
piglite的专栏
08-27 1656
在vue3.0中注入全局方法不是在prototype上挂载了，而是添加在config.globalProperties属性上。虽然已经不存在使用prototype时可能出现的覆盖问题，但是加个。符号还是继承vue2的规范习惯代表全局。
Vue3定义全局变量的方式总结(附代码)
菜鸟教程
04-16 2240
由于 Vue3 没有 Prototype 属性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量Vue2：// 之前 (Vue 2.x)Vue3：// 之后 (Vue 3.x)定义一个全局变量，示例如下：在 Vue3 移除了过滤器，定义一个全局函数代替 Filters，示例如下：return `衔蝉-${str}`;
基础知识系列（三）：Vue3设置全局变量和地图挂载全局
A20231015的博客
11-27 1235
1.删包：git bash终端 rm -rf node_modules Linux命令。3.将OL_SDK和libs（Libraries 的缩写）文件夹放在src文件夹下。在OpenControl.vue中。在OpenControl.vue中。在main.js即入口文件中。在App.vue即组件文件中。在OpenMap.vue中。在OpenMap.vue中。
vue3之全局变量app.config.globalProperties的使用
热门推荐
samscat的博客
12-15 3万+
在main.js里面配置config const app = createApp(App); app.config.globalProperties.$user = { name: '梅长苏', weapons: '长剑', title: '刺客' } 在template模板中使用 <p>姓名：{{$user.name}} </p> 在setup中使用 const cns = getCurrentInstance() console.log(c.
26.Vue3学习篇-定义全局变量
qq_34334992的博客
08-30 4612
请注意，这种方式定义的全局变量并不是真正的全局变量，而是在组件树中进行传递和共享的。另外在 Vue 3 中，可以使用。来定义全局变量和方法。在 Vue 3 中，可以使用。在其他组件中，可以使用。
vue3使用provide/inject实现全局变量功能，部分摆脱vuex
启明星的指引---博客
06-14 5477
vue3新的provide/inject功能可以穿透多层组件，实现数据从父组件传递到子组件。 这时将所有需要使用的全局变量在根组件就provide，这样，所有的组件都能使用到这个变量。 如果需要变量是响应式的，就需要在provide的时候使用ref或者reactive包装变量。 for (let key in store) { let type = typeof store[key] if (type == 'function') {//这里是粗略的写法,目前当类型是函数时,直接provid
在Vue 3中使用Vue.prototype或全局变量的方法
qq_29715355的博客
04-23 1712
在Vue 2中，我们可以通过添加全局属性或方法，这样在组件中就可以直接使用this来访问这些全局内容，避免了在每个组件中重复导入。但在Vue 3中，不再适用，需要寻找新的方式来实现类似的全局变量使用。例如，我们想将Axios添加到全局，以便在组件中可以直接使用来发起请求，而无需每次都导入Axios。
Vue3定义全局变量的方式总结
lxy199000933的博客
12-11 1万+
Vue3定义全局变量的方式总结
Vue3全局组件通信之provide / inject
老电影故事的博客
03-13 7849
顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）：C组件引入到B组件里，B组件引入到A组件里渲染，此时A是C的爷爷级别（可能还有更多层级关系），如果你用 props ，只能一级一级传递下去，那就太繁琐了，因此我们需要更直接的通信方式。😜😜😜因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可。
Vue3 设置全局变量
JEECG官方博客
06-16 5292
如果需要变量是响应式的，就需要在 provide 的时候使用 ref 或者 reactive 包装变量。vue3新的 provide/inject 功能可以穿透多层组件，实现数据从父组件传递到子组件。可以将全局变量放在根组件的 provide 中，这样所有的组件都能使用到这个变量。
vue3 全局变量
最新发布
08-29
在 Vue 3 中，可以通过多种方式实现**全局变量**的定义和使用。以下是几种常见方法： --- ### ✅ 方法一：使用 `app.config.globalProperties`（适合 Vue 3 选项式 API） ```js // main.js import { createApp } ...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值