vue3配置全局参数(挂载全局方法)以及组件的使用

 更新时间:2022年07月21日 09:39:57   作者:温情key  
这篇文章主要介绍了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
 	 }
   }
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于 Vue 的树形选择组件的示例代码

    基于 Vue 的树形选择组件的示例代码

    本篇文章主要介绍了基于 Vue 的树形选择组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue使用html2canvas实现截取图片并保存

    Vue使用html2canvas实现截取图片并保存

    html2canvas是一个JavaScript库,它可以将HTML元素转换为Canvas元素本文将介绍一下Vue如何使用html2canvas实现截取图片并保存功能,需要的可以参考下
    2023-12-12
  • vue2实现传送门效果的示例

    vue2实现传送门效果的示例

    本文主要介绍了vue2实现传送门效果的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue3+vite+ts之axios的坑及解决

    vue3+vite+ts之axios的坑及解决

    这篇文章主要介绍了vue3+vite+ts之axios的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue+elementui实现动态控制表格列的显示和隐藏

    vue+elementui实现动态控制表格列的显示和隐藏

    这篇文章主要介绍了vue+elementui实现动态控制表格列的显示和隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue+echarts实现中国地图流动效果(步骤详解)

    vue+echarts实现中国地图流动效果(步骤详解)

    这篇文章主要介绍了vue+echarts实现中国地图流动效果(步骤详解),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • Vue3中vue-router的使用方法详解

    Vue3中vue-router的使用方法详解

    Vue Router 是 Vue 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,本文将通过简单的示例为大家介绍一下vue-router的使用,需要的可以参考一下
    2023-06-06
  • vue如何集成raphael.js中国地图的方法示例

    vue如何集成raphael.js中国地图的方法示例

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成raphael.js中国地图的相关资料,需要的朋友可以参考下。
    2017-08-08
  • ElementUI级联选择器实现同一父级下最多只能选中一个子级

    ElementUI级联选择器实现同一父级下最多只能选中一个子级

    本文主要介绍了ElementUI级联选择器实现同一父级下最多只能选中一个子级,同一父级下的子节点单选,又可以选择多个不同父级下的节点,具有一定参考价值,感兴趣的可以了解一下
    2023-10-10
  • uniapp 小程序和app map地图上显示多个酷炫动态的标点效果(头像后端传过来)

    uniapp 小程序和app map地图上显示多个酷炫动态的标点效果(头像后端传过来)

    这篇文章主要介绍了uniapp 小程序和app map地图上显示多个酷炫动态的标点效果(头像后端传过来),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09

最新评论