对比:
在vue2.x中我们挂载全局变量或方法是通过是使用Vue.prototype.$xxxx=xxx的形式来挂载,然后通过this.$xxx来获取挂载到全局的变量或者方法
但是 在vue3.x中显然是不行滴,在setup里面我们都获取不到this,但是 别怕 vue3.x官网给我们提供了新的方法 叫:globalProperties 。添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权

举例: 比如我们挂在一下axios

// 在main.js上
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
import axios from './api/axios'
app.config.globalProperties.$axios = axios;
app.use(router).use(store).mount('#app');

如何使用呢

// 在页面上引用:
import { getCurrentInstance } from 'vue';
const { proxy } =getCurrentInstance();

使用

proxy.$axios({
url:'',
method:'',
})

如何vue3中使用全局变量,与Vue2的区别的更多相关文章

  1. Python中的全局变量与局部变量的区别

    全局变量与局部变量两者的本质区别就是在于作用域 用通俗的话来理解的话, 全局变量是在整个py文件中声明,全局范围内都可以访问 局部变量是在某个函数中声明的,只能在该函数中调用它,如果试图在超出范围的地 ...

  2. 总结javascript中的全局变量和局部变量的区别以及声明函数和调用函数的区别

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&quo ...

  3. Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务

    前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...

  4. 【转载】vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件,拿到标签本身($el)

    原文地址:https://blog.csdn.net/qq_39953537/article/details/110437554 vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件, ...

  5. 关于在vue3中使用vuex与在vue2中使用vuex的区别

    首先vue2中vuex版本是4.x以下,vue3中使用vuex需要保证vuex版本在4.x及以上. 以下说一说怎么在vue3中使用vuex,与vue2大同小异 首先在views新建一个store文件夹 ...

  6. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  7. vue3中watch函数

    watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...

  8. vue3与vue2的区别

    全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...

  9. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  10. 在vue3中使用router-link-active遇到的坑

    在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...

随机推荐

  1. 声音克隆,精致细腻,人工智能AI打造国师“一镜到底”鬼畜视频,基于PaddleSpeech(Python3.10)

    电影<满江红>上映之后,国师的一段采访视频火了,被无数段子手恶搞做成鬼畜视频,诚然,国师的这段采访文本相当经典,他生动地描述了一个牛逼吹完,大家都信了,结果发现自己没办法完成最后放弃,随后 ...

  2. Nginx SSL 双向认证,key 生成和配置

    一.安装Nginx和OpenSSL yum install nginx openssl -y 二.SSL 服务器 / 客户端双向验证证书的生成 创建一个新的 CA 根证书,在 nginx 安装目录下新 ...

  3. 组合数学知识整理_USTC-IAT期末复习版(已完结)

    组合数学知识整理_USTC-IAT期末复习版(已完结) 第一章 排列与组合 第二章 递推关系与母函数 第三章 容斥原理与鸽巢原理 第四章 polya定理

  4. 提升性能的利器:深入解析SectionReader

    一. 简介 本文将介绍 Go 语言中的 SectionReader,包括 SectionReader的基本使用方法.实现原理.使用注意事项.从而能够在合适的场景下,更好得使用SectionReader ...

  5. PREDIV与PLLMUL配置应用笔记

    下图为CH32V305/307和CH32F205/207时钟树框图,在此,以CH32V307VCT6芯片,外置25MHz晶振为例,简述图中PREDIV与PLLMUL的配置方法,最终实现144MHz系统 ...

  6. Python中的弱引用与基础类型支持情况探究

    背景 最近有一个业务场景需要用Python自行实现一个简单的LRU cache,不可避免的接触到了弱引用这一概念,这里记录一下. 强引用 Python内存回收由垃圾回收器自动管理,当一个对象的引用计数 ...

  7. linux 软件包:UnixBench 性能测试工具、跑分神器

    目录 安装 使用 结果示例 测试项说明 UnixBench是一个类unix系(Unix,BSD,Linux)统下的性能测试工具,一个开源工具,被广泛用与测试linux系统主机的性能.Unixbench ...

  8. asp.net core之配置

    简介 配置在asp.net core中可以说是我们必不可少一部分.ASP.NET Core 中的应用程序配置是使用一个或多个配置提供程序执行的. 配置提供程序使用各种配置源从键值对读取配置数据,普通最 ...

  9. mysql系列03---事务

    一.事务简介 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销 操作请求,即这些操作要么同时成功,要么同时失败. 二.事物的四大特性 一个事务具有A ...

  10. 深度系统安装wine

    step1: 输入命令: sudo dpkg --add-architecture i386 step2: 1.切换成管理员权限: sudo su 2.打开源文件 vi /etc/apt/source ...