vue3配置全局參數(shù)(掛載全局方法)以及組件的使用
更新時間：2022年07月21日 09:39:57 作者：溫情key
這篇文章主要介紹了vue3配置全局參數(shù)(掛載全局方法)以及組件的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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)前組件實例
const { appContext } = getCurrentInstance();
// 打印看一下結(jié)構(gòu)
console.log(appContext)
在appContext.config.globalProperties里面已經(jīng)可以看到掛載的$messageBox和$message1了，至于為什么還有一個$message
我們可以看張element plus官網(wǎng)的截圖
可以看到這是element plus默認(rèn)掛載的，我們可以直接使用，這里添加$message1只是演示，其實是可以直接使用默認(rèn)掛載的。
完整使用例子
// 引入vue的 getCurrentInstance 方法
import { defineComponent, getCurrentInstance } from "vue";
// 獲取當(dāng)前組件實例
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
}
}
})以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報文,前端采用vue進行接收,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點，一般會用作和computed進行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)2022-12-12
vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了基于vue 實現(xiàn)token驗證的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue實現(xiàn)組件之間傳值功能,結(jié)合實例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下2018-07-07
解決vue3.0運行項目warning Insert `·` prettier/pret
這篇文章主要介紹了解決vue3.0運行項目warning Insert `·` prettier/prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題
這篇文章主要給大家介紹一下如何解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題，文中有相關(guān)的解決方法，通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
淺析前端路由簡介以及vue-router實現(xiàn)原理
路由就是用來跟后端服務(wù)器進行交互的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。這篇文章主要介紹了前端路由簡介以及vue-router實現(xiàn)原理,需要的朋友可以參考下2018-06-06
Vue 3 中使用 Element Plus 的 `el-t
在 Vue 3 中使用 Element Plus 的 `el-table` 組件實現(xiàn)自適應(yīng)高度,你可以根據(jù)容器的高度動態(tài)設(shè)置表格的高度,下面通過示例代碼給大家展示,感興趣的朋友一起看看吧2024-12-12