如何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的路由 ...
随机推荐
- Windows 10 开启子系统Ubuntu
卸载原有的wsl 分发子系统 # 查看已安装的wsl子系统 wsl --list # 依次删除wsl 子系统 wsl --unregister <子系统名称> 结果 安装子系统Ubuntu ...
- 【QCustomPlot】绘制 x-y 曲线图
说明 使用 QCustomPlot 绘图库辅助开发时整理的学习笔记.同系列文章目录可见 <绘图库 QCustomPlot 学习笔记>目录.本篇介绍如何使用 QCustomPlot 绘制 x ...
- Win11右键菜单改回win10
右键以管理员身份运行终端 reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\In ...
- Java 设计模式实战系列—工厂模式
在 Java 开发中,对象的创建是一个常见的场景,如果对象的创建和使用都写在一起,代码的耦合度高,也不利于后期的维护.我们可以使用工厂模式来解决这个问题,工厂模式是一个创建型模式,将对象的创建和使用分 ...
- AI-4多层感知机
4.1笔记 在线性网络中,任何特征的增大都会导致模型输出的增大或减小.这种想法在某些情况下不在适用,例如x和y并非线性关系.或者是x和y并不具有单调性.以及x1.x2会对y产生交互作用时. 为解决该问 ...
- PHP正则按照从大到小的SIGN签名算法
<?php/** * 签名算法 * @param unknown $key_id S_KEY(商户KEY) * @param unknown $array 例子:$array = array(' ...
- SQL Server中获取不同格式的日期
select * from 表名 where Convert(varchar(100),日期字段,23)='2008-12-15' Convert函数的应用: Select CONVERT(varch ...
- Python数据分析易错知识点归纳(五):横向对比
五.横向对比 排序 # 列表 a.sort() # 修改原列表,返回值为None!!!!!这里很容易出错 sorted(a) # 生成新的列表 # 嵌套列表的排序(若是对字典排序,需先用list()转 ...
- switch写法详解
我们在开发项目中经常遇到对数据的判断进行相应的逻辑(if..else ,三元运算等),Switch 语句用来选择多个需要执行的代码块 ,一定程度上简化了if....else 1. 语法 switch ...
- CPU摸鱼被抓,上了一个新技术!
我叫阿Q,是CPU一号车间里的员工,我所在的这个CPU足足有8个核,就有8个车间,干起活来杠杠滴. 我们CPU的任务就是执行程序员编写的程序,只不过程序员编写的是高级语言代码,而我们执行的是这些代码被 ...