vue3全局变量和vue2全局变量使用

最新推荐文章于 2024-06-06 22:33:37 发布
最新推荐文章于 2024-06-06 22:33:37 发布
阅读量993 收藏 11
点赞数 18
文章标签： vue.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50519996/article/details/135413743
版权

目录

vue2全局变量

vue3  全局变量

方法一：provide(key,value)和inject搭配使用

方法二 （1）app.config.globalProperties.全局变量名

（2）app.config.globalProperties.全局变量名

vue2全局变量

vue3  全局变量

方法一：provide(key,value)和inject搭配使用

方法二 （1）app.config.globalProperties.全局变量名

要和getCurrentInstance搭配使用

运行结果

打印截图

（2）app.config.globalProperties.全局变量名

要和getCurrentInstance搭配使用

赵同志
关注
  • 18
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3中挂载全局变量
weixin_43090018的博客
05-24 3万+
vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法 在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用， 上代码 首先在main.js中写入我们需要挂载的一个变量，比如一个地址吧 main.js import { createApp } from 'vue' import App from './App' import store from '@s
Vue3全局变量的定义和使用
热门推荐
qq_32805013的博客
03-09 1万+
但事实上官方是不建议应用使用 getCurrentInstance 方法的，所以我更加推荐以下的方法去存储和获取全局变量，即依赖注入的方式
Vue3的ref创建一个全局变量,非常好用!
最新发布
weixin_62328265的博客
06-06 504
通过Vue3的ref对象创建一个响应式对象使用,同时可以用compute,watch等Vue3的API对其进行操作
Vue3定义全局变量的方式总结
lxy199000933的博客
12-11 8290
Vue3定义全局变量的方式总结
前端面试：vue3中怎么设置全局变量
qq_43592064的博客
07-05 4486
vue3中怎么设置全局变量
Vue3 设置全局变量
JEECG官方博客
06-16 4620
如果需要变量是响应式的，就需要在 provide 的时候使用 ref 或者 reactive 包装变量。vue3新的 provide/inject 功能可以穿透多层组件，实现数据从父组件传递到子组件。可以将全局变量放在根组件的 provide 中，这样所有的组件都能使用到这个变量。
vue2 全局变量的设置方法
08-27
Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。 1. 全局变量专用模块 全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。例如，...
在vue里面设置全局变量或数据的方法
11-28
在Vue.js框架中，设置全局变量或数据是十分常见的需求，尤其在大型项目中，为了在各个组件之间共享状态和信息，全局变量的使用显得尤为重要。本文将详细讲解如何在Vue中实现全局变量的设置，并提供一个实际示例。 ...
Vue中全局变量的定义和使用
10-16
在Vue开发过程中，有时我们需要在多个组件之间共享数据或状态，这时就涉及到全局变量的定义和使用。Vue中全局变量的定义通常不是首选方案，因为这可能会导致代码耦合度提高，不易维护。然而，在某些特定场景下，如...
详解VUE 定义全局变量的几种实现方式
11-26
小型项目或对全局变量需求较少的场景，使用全局变量模块或挂载到`Vue.prototype`可能更为合适，它们相对简单且易于理解。而大型项目或需要复杂状态管理的场景，Vuex则提供了更强大的管理和同步机制。开发者应根据...
前端_Vue3定义和使用全局变量
gzmhxsn的博客
12-16 2670
使用vue3获取和使用全局变量或方法
Vue3全局变量基础用法（vuex）
weixin_43575792的博客
01-21 5217
Vue3使用全局变量（vuex）前言一、安装依赖二、使用步骤1.建立store(仓库）2.组件使用总结 前言 在使用vue3开发过程中，博主经常会遇到多个组件公用某一个变量，这个时候使用组件之间相互通信一类的方式就显得比较麻烦，最好就是设置全局变量来搞定，那在vue3+vite的环境中改如何使用全局变量呢？ 一、安装依赖 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单说，它可以满足多个组件共享一个变量的需求，使用以下命令在控制台安装 npm install vuex 二、使用步骤
Vue3，在组件中引用全局变量的方法
qq_45649001的博客
11-20 5202
Vue3，在组件中引用全局变量的方法
vue3全局变量定义使用
m0_46515581的博客
01-19 2427
vue3 api等自定义全局变量
vue3-全局变量的使用
名人卷耶
01-18 3546
一、main.ts中定义 二、在页面中使用 <template> <div> 全局变量 <div>方法1（使用 getCurrentInstance 的 appContext）：{{way1}}</div> <div>方法2（从 getCurrentInstance 结构出 proxy）：{{way2}}</div> </div> </template> <script
vue3定义和使用全局变量方法，vue3中使用echarts
bittingCat的博客
08-11 5940
文章目录前言一、定义和使用全局变量1.定义2.使用总结 前言 在我们使用vue3.x的时候，有些特性还是跟vue2.x区别很大的，这里讲下echarts的使用和怎么定义和使用全局变量 vue2中是：Vue.prototype.$http = () => {} vue3中是：const app = createApp({}) app.config.globalProperties.$http = () => {} 一、定义和使用全局变量 1.定义 main.t
获取及设置 Vue3 全局变量
weixin_50368372的博客
12-20 3932
globalProperties: 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
Vue3全局变量使用
缘如风的博客
08-28 1459
Vue3全局变量使用，provide/inject使用
vue3全局变量的使用
08-14
在Vue 3中，可以使用Vue的全局API来定义和使用全局变量。以下是一些使用全局变量的方法： 1. 使用app.config.globalProperties：可以通过app.config.globalProperties将变量添加到Vue的全局作用域中。这样，你就可以在整个应用程序中访问该变量。例如： ```javascript // main.js import { createApp } from 'vue' const app = createApp(App) app.config.globalProperties.$myGlobalVariable = 'Hello, Vue 3!' app.mount('#app') ``` 然后，在组件中，你可以通过`this.$myGlobalVariable`来访问全局变量： ```vue <template> <div> {{ $myGlobalVariable }} </div> </template> <script> export default { mounted() { console.log(this.$myGlobalVariable) // 输出：Hello, Vue 3! } } </script> ``` 2. 使用provide/inject：这是Vue 3中新引入的组件间通信方法。你可以在父组件中使用provide来提供全局变量，然后在子组件中使用inject来注入该变量。例如： ```vue <!-- Parent.vue --> <template> <div> <child-component></child-component> </div> </template> <script> import { provide } from 'vue' export default { setup() { provide('myGlobalVariable', 'Hello, Vue 3!') } } </script> <!-- Child.vue --> <template> <div> {{ myGlobalVariable }} </div> </template> <script> import { inject } from 'vue' export default { setup() { const myGlobalVariable = inject('myGlobalVariable') return { myGlobalVariable } } } </script> ``` 无论你选择哪种方法，都可以在Vue 3中使用全局变量。请根据你的实际需求选择最适合的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值