如何vue3中使用全局变量,与Vue2的区别
对比:
在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的区别的更多相关文章
- Python中的全局变量与局部变量的区别
全局变量与局部变量两者的本质区别就是在于作用域 用通俗的话来理解的话, 全局变量是在整个py文件中声明,全局范围内都可以访问 局部变量是在某个函数中声明的,只能在该函数中调用它,如果试图在超出范围的地 ...
- 总结javascript中的全局变量和局部变量的区别以及声明函数和调用函数的区别
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&quo ...
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
- 【转载】vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件,拿到标签本身($el)
原文地址:https://blog.csdn.net/qq_39953537/article/details/110437554 vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件, ...
- 关于在vue3中使用vuex与在vue2中使用vuex的区别
首先vue2中vuex版本是4.x以下,vue3中使用vuex需要保证vuex版本在4.x及以上. 以下说一说怎么在vue3中使用vuex,与vue2大同小异 首先在views新建一个store文件夹 ...
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
- vue3中watch函数
watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...
- vue3与vue2的区别
全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...
- vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...
- 在vue3中使用router-link-active遇到的坑
在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...
随机推荐
- WPF在win10/11上启用模糊特效 适配Dark/Light Mode
先看效果图 win11: win10: 大佬们已经总结了许多在WPF上开启亚克力效果的方法,本文只是做一些填坑和适配工作. 正文开始 先来看看部分版本Windows的模糊效果和我的适配方案: 1).早 ...
- GPU技术在大规模数据集处理和大规模计算中的应用
目录 GPU 技术在大规模数据集处理和大规模计算中的应用 随着深度学习在人工智能领域的快速发展,大规模数据处理和大规模计算的需求日益增长.GPU(图形处理器)作为现代计算机的重要部件,被广泛应用于这些 ...
- mysql索引优化-01
1.1索引是什么? mysql官方对于索引的定义:可以帮助mysql高效的获取数据的数据结构. mysql在存储数据之外,数据库系统中还维护着满足特定查找算法的数据结构,这些数据结构给以某种引 ...
- auto.js自动化手机脚本初始配置
软件选择: auto.js 8.0pro版本(对比4.0版本有阉割,微信支付宝不能点)有两种模式: 客户端模式 服务器模式 auto.js 4.0版本有一种模式: 客户端模式 设备和电脑连接: 手机: ...
- PostgreSQL 新手入门指引
自从MySQL被Oracle收购以后,PostgreSQL 逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作 ...
- 在VS Code 中调试远程服务器的PHP代码
背景 对于PHP的调试,一般来说我们用 echo 和 var_dump 就够用了. 有时会碰到要解决复杂的逻辑或需要确认代码的运行顺序,这里用var_dump效率就比较低了,这时建议用断点的方式进行代 ...
- 【转载】Linux虚拟化KVM-Qemu分析(四)之CPU虚拟化(2)
原文信息: 作者:LoyenWang 出处:https://www.cnblogs.com/LoyenWang/ 公众号:LoyenWang 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作 ...
- Abaqus添加初始缺陷
主要介绍通过施加节点位移的方法 步骤一: 复制model,新建Step,static linear perturbation Tools->Analytical Field 定义场函数,例如:A ...
- .Net 一套接口多实现
.Net 一套接口多实现 接口(interface)可理解为规范.标准.协议.接口是用来约束各方都在同一组规范下工作. 电脑外设USB接口,各个品牌商家生产的U盘.鼠标都能够被电脑主板识别并工作,这是 ...
- CSS: 绝对定位fixed
属性介绍 元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置.元素的位置在屏幕滚动时不会改变.打印时,元素会出现在的每页的固定位置.fi ...