如何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的路由 ...
随机推荐
- 一个支持WinForms换肤的开源组件
推荐一个一键换肤的WinForms皮肤组件. 项目简介 这是一个支持自定义WinForms窗口.控件颜色.禁用状态.动画效果的皮肤组件. 支持的组件有:多选框.分割线.按钮.文本框.单选按钮.输入框. ...
- 如何扩展及优化CI/CD流水线?
如今应用程序的开发通常由多个开发人员组成的团队完成.每个人或团队在项目中发挥自己的作用,然后我们发现在项目的末尾总是有几段代码需要编译,根据每个人的工作方法,管理这种集成可能会浪费很多时间.持续集成和 ...
- Blazor前后端框架Known-V1.2.1
V1.2.1 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行. 概述 基于C#和Blazor实现的快速开发框架,前后端分离,开箱即用. 跨平台,单 ...
- 4.1 探索LyScript漏洞挖掘插件
在第一章中我们介绍了x64dbg这款强大的调试软件,通过该软件逆向工程师们可以手动完成对特定进程的漏洞挖掘及脱壳等操作,虽然x64dbg支持内置Script脚本执行模块,但脚本引擎通常来说是不够强大的 ...
- mac shell终端命令行快捷键
Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h 退格删除一个字符,相当于通常的Backspace键 ...
- allure报告生成
allure生成测试报告 1.生成xml文件 pytest 测试文件所在路径 --alluredir 生成的测试结果数据保存的目录 pytest --alluredir=resport/xml/ D ...
- Flutter 屏幕采集如何实现(提供示例demo)
在视频会议.线上课堂.游戏直播等场景,屏幕共享是一个最常见的功能.屏幕共享就是对屏幕画面的实时共享,端到端主要有几个步骤:录屏采集.视频编码及封装.实时传输.视频解封装及解码.视频渲染.一般来说,实时 ...
- 从零实现的Chrome扩展
从零实现的Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的TamperMonkey.Proxy SwitchyOmega.AdGu ...
- PTA 21级数据结构与算法实验5—树和二叉树
目录 7-1 还原二叉树 7-2 朋友圈 7-3 修理牧场 7-4 玩转二叉树 7-5 根据后序和中序遍历输出先序遍历 7-6 完全二叉树的层序遍历 7-7 列出叶结点 7-8 部落 7-9 建立与遍 ...
- 2021-7-29 MySql进阶
Alter的使用: 列的增加和删减 alter table users add user_name VARCHAR(100);#添加一列在末尾 SELECT * from users; alter t ...