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

目录
  • vue2的方式
    • 1. 全局挂载
    • 2. 组件使用
  • vue3的方式
    • 1. 全局挂载
    • 2. 组件使用

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
 	 }
   }
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue全局组件与局部组件使用方法详解

    vue全局/局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件 他暴漏的

  • Vue3全局挂载使用Axios学习实战

    Vue3全局挂载使用Axios学习实战

    目录 引言 一.全局挂载 二.全局使用 引言 在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI. 一.全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: import Vue from 'vue' import router from '@/router' impo

  • vue3.0如何在全局挂载对象和方法

    vue3.0如何在全局挂载对象和方法

    目录 如何在全局挂载对象和方法 1.官方的说明 2.更新后的挂载方法 3.在全局使用 4.但是应用中的this对象已经不再是一个Vue对象了 vue3全局挂载和使用 如何在全局挂载对象和方法 1.官方的说明 Vue3.x已经不支持直接Vue.prototype.$http = () => {}这种方式来挂载全局对象,这是由于globalVue不再是构造函数,因此不再支持该构造函数. 2.更新后的挂载方法 这个是官网的说明 所以现在我们的办法就是这样 import { createApp } fr

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

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

    目录 vue2的方式 1. 全局挂载 2. 组件使用 vue3的方式 1. 全局挂载 2. 组件使用 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("

  • MySQL8新特性之全局参数持久化详解

    目录 前言 全局参数持久化 写在最后 总结 参考文档: 前言 自从 2018 年发布第一版 MySQL 8.0.11 正式版至今,MySQL 版本已经更新迭代到 8.0.26,相对于稳定的 5.7 版本来说,8.0 在性能上的提升是毋庸置疑的! 随着越来越多的企业开始使用 MySQL 8.0 版本,对于 DBA 来说是一个挑战,也是一个机遇!

  • 使用mixins实现elementUI表单全局验证的解决方法

    使用ElementUi搭建框架的时候,大家应该都有考虑过怎么做全局验证,毕竟复制粘贴什么的是最烦了,这里分享下个人的解决方法. 验证规则 分析规则 一般验证规则,主要是是否必填,不为空,以及参数类型的验证. 基于这个条件,我们开始找找思路, 单个字段的验证是这样的: name: { required: 是否必填, validator: 自定义规则, message: 失败提示消息(非自定义时触发), trigger: 触发方式 } 循环实现 固定的规则.当一个东西固定之后,那必然是可以重复使用的

  • SpringBoot如何读取配置文件参数并全局使用

    SpringBoot如何读取配置文件参数并全局使用

    这篇文章主要介绍了SpringBoot如何读取配置文件参数并全局使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言: 读取配置文件参数的方法:@Value("${xx}")注解.但是@Value不能为static变量赋值,而且很多时候我们需要将参数放在一个地方统一管理,而不是每个类都赋值一次. 正文: 注意:一定要给类加上@Component 注解 application.xml test: app_id: 12345 app_

  • AngularJS全局警告框实现方法示例

    本文实例讲述了AngularJS全局警告框实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • javascript中全局对象的parseInt()方法使用介绍

    复制代码 代码如下: <html> <head> <title>全局对象的parseInt() 方法</title> <script> /* parseInt() 函数可解析一个字符串,并返回一个整数. 1.解析字符串,直到不能解析为止 2.进制转化中,解析字符串,直到不能解析为止 */ document.write(parseInt("123") + "<br/>");//123 docume

  • javascript中全局对象的isNaN()方法使用介绍

    复制代码 代码如下: <html> <head> <title>全局对象的isNaN()方法</title> <script> /* isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字. 当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的情况. */ document.write(isNaN(123) + "<br/>"

  • 基于Java代码实现游戏服务器生成全局唯一ID的方法汇总

    在服务器系统开发时,为了适应数据大并发的请求,我们往往需要对数据进行异步存储,特别是在做分布式系统时,这个时候就不能等待插入数据库返回了取自动id了,而是需要在插入数据库之前生成一个全局的唯一id,使用全局的唯一id,在游戏服务器中,全局唯一的id可以用于将来合服方便,不会出现键冲突.也可以将来在业务增长的情况下,实现分库分表,比如某一个用户的物品要放在同一个分片内,而这个分片段可能是根据用户id的范围值来确定的,比如用户id大于1000小于100000的用户在一个分片内.目前常用的有以下几种:

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • vue 使用vue-i18n做全局中英文切换的方法

    1.vue-i18n安装 npm install vue-i18n --save-dev 2.在main.js文件中引入 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言 messages: { ' zh': require

随机推荐