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前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報(bào)文,前端采用vue進(jìn)行接收,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問(wèn)知識(shí)點(diǎn)，一般會(huì)用作和computed進(jìn)行比較。那么本文就來(lái)帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實(shí)現(xiàn)2022-12-12
vue登錄頁(yè)實(shí)現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁(yè)實(shí)現(xiàn)使用cookie記住7天密碼功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
基于vue 實(shí)現(xiàn)token驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了基于vue 實(shí)現(xiàn)token驗(yàn)證的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下2018-07-07
解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/pret
這篇文章主要介紹了解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/prettier問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
解決vue3中from表單嵌套el-table時(shí)填充el-input,v-model不唯一問(wèn)題
這篇文章主要給大家介紹一下如何解決vue3中from表單嵌套el-table時(shí)填充el-input,v-model不唯一問(wèn)題，文中有相關(guān)的解決方法，通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
淺析前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理
路由就是用來(lái)跟后端服務(wù)器進(jìn)行交互的一種方式，通過(guò)不同的路徑，來(lái)請(qǐng)求不同的資源，請(qǐng)求不同的頁(yè)面是路由的其中一種功能。這篇文章主要介紹了前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理,需要的朋友可以參考下2018-06-06
Vue 3 中使用 Element Plus 的 `el-t
在 Vue 3 中使用 Element Plus 的 `el-table` 組件實(shí)現(xiàn)自適應(yīng)高度,你可以根據(jù)容器的高度動(dòng)態(tài)設(shè)置表格的高度,下面通過(guò)示例代碼給大家展示,感興趣的朋友一起看看吧2024-12-12