vue3.0如何在全局掛載對(duì)象和方法
更新時(shí)間：2022年04月19日 10:48:28 作者：gis_rc
這篇文章主要介紹了vue3.0如何在全局掛載對(duì)象和方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
如何在全局掛載對(duì)象和方法
1.官方的說(shuō)明
Vue3.x已經(jīng)不支持直接Vue.prototype.$http = () => {}這種方式來(lái)掛載全局對(duì)象，這是由于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對(duì)象已經(jīng)不再是一個(gè)Vue對(duì)象了
你不能使用Vue.use()或者Vue.extend()的方法，像有的插件，例如vue-layer,就不能在vue3.x中使用。
vue3全局掛載和使用
1.開(kāi)發(fā)環(huán)境 vue3.0
2.電腦系統(tǒng) windows10專(zhuān)業(yè)版
3.在使用vue開(kāi)發(fā)的過(guò)程中,我們會(huì)有一些公用的屬性和方法,我們一般為了方便使用會(huì)這個(gè)屬性和方法掛載到全局,下面我來(lái)分享一下
4.vue2掛載方法
Vue.prototype.$http = http //在對(duì)應(yīng)的組件中使用 this.$http //這種寫(xiě)法相信小火們很熟悉了,那么在vue3中怎么寫(xiě)呢?
4-1.vue3掛載并使用
// 全局掛載 const app = createApp(App) app.config.globalProperties.$Methods = Methods;
//在對(duì)應(yīng)的組件中使用
import {
? defineComponent,
? ref,
? getCurrentInstance,
? onMounted,
? reactive,
} from "vue";
//因?yàn)関ue3是組合API,所以要引入對(duì)應(yīng)的(getCurrentInstance)// setup
//一個(gè)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: "項(xiàng)羽" },
? ? ? { id: "5", name: "小米" },
? ? ? { id: "1", name: "紅米" },
? ? ? { id: "1", name: "諾基亞" },
? ? ? { id: "2", name: "真我" },
? ? ]);
? ? onMounted(() => {
? ? ? console.log($Methods.JsonArrReduce(jsonarrreduce, "id"));
? ? });
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
詳解用vue-cli來(lái)搭建vue項(xiàng)目和webpack
本篇文章主要介紹了詳解用vue-cli來(lái)搭建vue項(xiàng)目和webpack，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,是一個(gè)功能強(qiáng)大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-08-08
記一次vue去除#問(wèn)題處理經(jīng)過(guò)小結(jié)
這篇文章主要介紹了vue去除#問(wèn)題處理經(jīng)過(guò)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue webpack build資源相對(duì)路徑的問(wèn)題及解決方法
這篇文章主要介紹了vue webpack build資源相對(duì)路徑的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue.nextTick()與setTimeout的區(qū)別及說(shuō)明
這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡(jiǎn)單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡(jiǎn)單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹，感興趣的朋友一起看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)組件值的累加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了教你搭建按需加載的Vue組件庫(kù)(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10