vue3.0如何在全局掛載對象和方法

更新時間：2022年04月19日 10:48:28 作者：gis_rc

這篇文章主要介紹了vue3.0如何在全局掛載對象和方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何在全局掛載對象和方法

1.官方的說明

Vue3.x已經(jīng)不支持直接Vue.prototype.$http = () => {}這種方式來掛載全局對象，這是由于globalVue不再是構(gòu)造函數(shù)，因此不再支持該構(gòu)造函數(shù)。

2.更新后的掛載方法

所以現(xiàn)在我們的辦法就是這樣

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const vm = createApp()
let c=()=>{
    console.log(1)
};
vm.config.globalProperties.$http =c;
vm.use(store).use(router).use(c).mount('#app');

3.在全局使用

this.$http

4.但是應(yīng)用中的this對象已經(jīng)不再是一個Vue對象了

你不能使用Vue.use()或者Vue.extend()的方法，像有的插件，例如vue-layer,就不能在vue3.x中使用。

vue3全局掛載和使用

1.開發(fā)環(huán)境 vue3.0

2.電腦系統(tǒng) windows10專業(yè)版

3.在使用vue開發(fā)的過程中,我們會有一些公用的屬性和方法,我們一般為了方便使用會這個屬性和方法掛載到全局,下面我來分享一下

4.vue2掛載方法

Vue.prototype.$http = http
//在對應(yīng)的組件中使用
this.$http
//這種寫法相信小火們很熟悉了,那么在vue3中怎么寫呢?

4-1.vue3掛載并使用

// 全局掛載
const app = createApp(App)
app.config.globalProperties.$Methods = Methods;

//在對應(yīng)的組件中使用
import {
? defineComponent,
? ref,
? getCurrentInstance,
? onMounted,
? reactive,
} from "vue";
//因為vue3是組合API,所以要引入對應(yīng)的(getCurrentInstance)

// setup
//一個json數(shù)組去重
const { proxy }: any = getCurrentInstance();//關(guān)鍵代碼
? ? const $Methods = proxy.$Methods;//關(guān)鍵代碼
? ? const jsonarrreduce = reactive([
? ? ? { id: "1", name: "李白" },
? ? ? { id: "2", name: "杜甫" },
? ? ? { id: "3", name: "白居易" },
? ? ? { id: "4", name: "項羽" },
? ? ? { id: "5", name: "小米" },
? ? ? { id: "1", name: "紅米" },
? ? ? { id: "1", name: "諾基亞" },
? ? ? { id: "2", name: "真我" },
? ? ]);
? ? onMounted(() => {
? ? ? console.log($Methods.JsonArrReduce(jsonarrreduce, "id"));
? ? });

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
詳解用vue-cli來搭建vue項目和webpack
本篇文章主要介紹了詳解用vue-cli來搭建vue項目和webpack，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報錯解決的相關(guān)資料,需要的朋友可以參考下
2022-08-08
記一次vue去除#問題處理經(jīng)過小結(jié)
這篇文章主要介紹了vue去除#問題處理經(jīng)過，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue webpack build資源相對路徑的問題及解決方法
這篇文章主要介紹了vue webpack build資源相對路徑的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-06-06
vue.nextTick()與setTimeout的區(qū)別及說明
這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實現(xiàn)彈框遮罩點擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡單的實現(xiàn)彈框,遮罩,點擊其他區(qū)域關(guān)閉彈框, 簡單的思路是以一個div作為遮罩,這篇文章給大家詳細介紹了vue實現(xiàn)彈框遮罩點擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹，感興趣的朋友一起看看吧
2018-09-09
vue實現(xiàn)組件值的累加
這篇文章主要為大家詳細介紹了vue實現(xiàn)組件值的累加，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
教你搭建按需加載的Vue組件庫(小結(jié))
這篇文章主要介紹了教你搭建按需加載的Vue組件庫(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue組件間通信全面講解
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10