广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3配置全局参数(挂载全局方法)以及组件的使用
  • 832
分享到

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

2024-04-02 19:04:59 832人浏览 八月长安
摘要

目录Vue2的方式1. 全局挂载2. 组件使用vue3的方式1. 全局挂载2. 组件使用vue2的方式 1. 全局挂载 Vue.property.xxx import Vue fro

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

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

本文链接: https://www.lsjlt.com/news/164821.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue3配置全局参数(挂载全局方法)以及组件的使用
    目录vue2的方式1. 全局挂载2. 组件使用vue3的方式1. 全局挂载2. 组件使用vue2的方式 1. 全局挂载 Vue.property.xxx import Vue fro...
    99+
    2022-11-13
  • vue3怎么配置全局参数及组件
    这篇“vue3怎么配置全局参数及组件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3怎么配置全局参数及组件”文章吧。v...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作