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前端如何接收后端传过来的带list集合的数据

    vue前端如何接收后端传过来的带list集合的数据

    这篇文章主要介绍了vue前端如何接收后端传过来的带list集合的数据,前后端交互,文中的示例Json报文,前端采用vue进行接收,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue watch监听使用的几种方法

    Vue watch监听使用的几种方法

    watch是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用。在面试时,也是必问知识点,一般会用作和computed进行比较。那么本文就来带大家从源码理解watch的工作流程,以及依赖收集和深度监听的实现
    2022-12-12
  • vue登录页实现使用cookie记住7天密码功能的方法

    vue登录页实现使用cookie记住7天密码功能的方法

    这篇文章主要介绍了vue登录页实现使用cookie记住7天密码功能的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 基于vue 实现token验证的实例代码

    基于vue 实现token验证的实例代码

    这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • vue实现组件之间传值功能示例

    vue实现组件之间传值功能示例

    这篇文章主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
    2018-07-07
  • 解决vue3.0运行项目warning Insert `·` prettier/prettier问题

    解决vue3.0运行项目warning Insert `·` prettier/pret

    这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue-pdf实现在线预览PDF文件

    Vue-pdf实现在线预览PDF文件

    这篇文章主要为大家详细介绍了Vue-pdf实现在线预览PDF文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题

    解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题

    这篇文章主要给大家介绍一下如何解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题,文中有相关的解决方法,通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 浅析前端路由简介以及vue-router实现原理

    浅析前端路由简介以及vue-router实现原理

    路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。这篇文章主要介绍了前端路由简介以及vue-router实现原理,需要的朋友可以参考下
    2018-06-06
  • Vue 3 中使用 Element Plus 的 `el-table` 组件实现自适应高度

    Vue 3 中使用 Element Plus 的 `el-t

    在 Vue 3 中使用 Element Plus 的 `el-table` 组件实现自适应高度,你可以根据容器的高度动态设置表格的高度,下面通过示例代码给大家展示,感兴趣的朋友一起看看吧
    2024-12-12

最新评论