vue3配置全局參數(shù)(掛載全局方法)以及組件的使用
更新時(shí)間：2022年07月21日 09:39:57 作者：溫情key
這篇文章主要介紹了vue3配置全局參數(shù)(掛載全局方法)以及組件的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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";
// 獲取當(dāng)前組件實(shí)例
const { appContext } = getCurrentInstance();
// 打印看一下結(jié)構(gòu)
console.log(appContext)
在appContext.config.globalProperties里面已經(jīng)可以看到掛載的$messageBox和$message1了，至于為什么還有一個(gè)$message
我們可以看張element plus官網(wǎng)的截圖
可以看到這是element plus默認(rèn)掛載的，我們可以直接使用，這里添加$message1只是演示，其實(shí)是可以直接使用默認(rèn)掛載的。
完整使用例子
// 引入vue的 getCurrentInstance 方法
import { defineComponent, getCurrentInstance } from "vue";
// 獲取當(dāng)前組件實(shí)例
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
}
}
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Vue使用html2canvas實(shí)現(xiàn)截取圖片并保存
html2canvas是一個(gè)JavaScript庫,它可以將HTML元素轉(zhuǎn)換為Canvas元素本文將介紹一下Vue如何使用html2canvas實(shí)現(xiàn)截取圖片并保存功能,需要的可以參考下2023-12-12
本文主要介紹了vue2實(shí)現(xiàn)傳送門效果的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue3+vite+ts之a(chǎn)xios的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解)
這篇文章主要介紹了vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡(jiǎn)單的示例為大家介紹一下vue-router的使用，需要的可以參考一下2023-06-06
vue如何集成raphael.js中國(guó)地圖的方法示例
最近的數(shù)據(jù)統(tǒng)計(jì)項(xiàng)目中要用到中國(guó)地圖，也就是在地圖上動(dòng)態(tài)的顯示某個(gè)時(shí)間段某個(gè)省份地區(qū)的統(tǒng)計(jì)數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。本文就給大家介紹了關(guān)于利用vue集成raphael.js中國(guó)地圖的相關(guān)資料，需要的朋友可以參考下。2017-08-08
ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí)
本文主要介紹了ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí),同一父級(jí)下的子節(jié)點(diǎn)單選,又可以選擇多個(gè)不同父級(jí)下的節(jié)點(diǎn),具有一定參考價(jià)值,感興趣的可以了解一下2023-10-10
uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過來)
這篇文章主要介紹了uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過來),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09