vue3配置全局参数(挂载全局方法)以及组件的使用
作者:温情key 发布时间:2023-07-02 16:45:46
标签:vue3,全局参数,挂载全局,组件
vue2的方式
1. 全局挂载
Vue.property.xxx
import Vue from "vue";
import axios from "axios";
Vue.prototype.$http= axios;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
2. 组件使用
this.$http.xxx();
vue3的方式
1. 全局挂载
app.config.globalProperties.xxx
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus, { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.config.globalProperties.$messageBox = ElMessageBox;
app.config.globalProperties.$message1 = ElMessage;
2. 组件使用
// 引入vue的 getCurrentInstance 方法
import { defineComponent, getCurrentInstance } from "vue";
// 获取当前组件实例
const { appContext } = getCurrentInstance();
// 打印看一下结构
console.log(appContext)
在appContext.config.globalProperties里面已经可以看到挂载的$messageBox和$message1了,至于为什么还有一个$message
我们可以看张element plus官网的截图
可以看到这是element plus默认挂载的,我们可以直接使用,这里添加$message1只是演示,其实是可以直接使用默认挂载的。
完整使用例子
// 引入vue的 getCurrentInstance 方法
import { defineComponent, getCurrentInstance } from "vue";
// 获取当前组件实例
const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
export default defineComponent({
setup() {
// 退出登录按钮
const loginOut = () => {
globalProxy.$messageBox.confirm("确定退出登录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
setTimeout(() => {
globalProxy.$message1({message: "已退出登录", type: "success"});
localStorage.removeItem("userInfo");
router.push("/login");
}, 200);
})
.catch((e) => {
console.log(e);
});
};
return {
loginOut
}
}
})
来源:https://blog.csdn.net/qq_48960335/article/details/124246217
0
投稿
猜你喜欢
- 关于正则表达式raw的\匹配规则这是我在学习中获得到的一个例子,第一表达式中匹配到的是none。于是乎我就在思考,为什么会匹配不到,假设\t
- 在Python的标准库中,functools库中有很多对方法有操作的封装功能,partial Objects就是其中之一,他可以实现对方法参
- 今天安装了几个模块,在cmd测试都正常,但是在pycharm就不行,后面试了以下方法:1、2、3、选择python.exe4、然后在回到se
- JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在
- new fun的执行过程分析,学习面向对象的朋友可以参考下。(1)创建一个新的对象,并让this指针指向它;(2)将函数的prototype
- WINDOWS 1、MySQL是有一些环境变量可以设置, 可输入:show variables;可查看当前的环境变量设置; 2、这些变量当中
- 1、PHP中的抽象类PHP 5 支持抽象类和抽象方法。定义为抽象的类不能被实例化。任何一个类,如果它里面至少有一个方法是被声明为抽象的,那么
- 索引是以表列为基础的数据库对象。索引中保存着表中排序的索引列,并且纪录了索引列在数据库表中的物理存储位置,实现了表中数据的逻辑排序。通过索引
- gitignore是什么文件就是git软件要忽略的文件列表,如果要忽略某些文件,,在Git工作区的根目录下创建一个特殊的.gitignore
- 芬兰数学家因卡拉花费3个月时间设计出的世界上迄今难度最大的数独。数独是 9 横 9 竖共有 81 个格子,同时又分为 9 个九宫格。规则很简
- 本文实例讲述了Python Matplotlib库安装与基本作图。分享给大家供大家参考,具体如下:不论是数据挖掘还是数据建模,都免不了数据可
- 随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解
- SQL Server所谓的分布式查询(Distributed Query)是能够访问存放在同一部计算机或不同计算机上的SQL Server或
- Django根据已有数据库表反向生成models类一. 创建一个Django项目django-admin startproject ‘xxx
- 用flask时遇到了返回字符串支持中文显示的问题,在web端显示的是utf-8的编码,而不是中文,如下图。虽然不影响接口的读取,但是可读性太
- 新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了
- 导语新的一年迎来了元宵节,元宵佳节在陪伴家人的同时,自然也少不了赏花灯,猜灯谜的项目。当然,受到疫情的影响,许多地方今年无法出门赏花灯,猜灯
- pytorch定义新的自动求导函数在pytorch中想自定义求导函数,通过实现torch.autograd.Function并重写forwa
- pytorch中我们有时候可能需要设定某些变量是参与训练的,这时候就需要查看哪些是可训练参数,以确定这些设置是成功的。pytorch中mod
- 需求有多个文件地理数据库(gdb),数据库内有多个面要素类图层,每个图层不能有自重叠,也不能和其他图层重叠。所以,需要为每个文件地理数据库(