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.開發(fā)環(huán)境 vue3.0
2.電腦系統(tǒng) windows10專業(yè)版
3.在使用vue開發(fā)的過(guò)程中,我們會(huì)有一些公用的屬性和方法,我們一般為了方便使用會(huì)這個(gè)屬性和方法掛載到全局,下面我來(lái)分享一下
4.vue2掛載方法
Vue.prototype.$http = http //在對(duì)應(yīng)的組件中使用 this.$http //這種寫法相信小火們很熟悉了,那么在vue3中怎么寫呢?
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)文章
antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
本篇文章主要介紹了vue-cli擴(kuò)展多模塊打包的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解
這篇文章主要為大家詳細(xì)介紹了vue表單驗(yàn)證自定義驗(yàn)證規(guī)則，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
基于vue中keep-alive緩存問(wèn)題的解決方法
今天小編就為大家分享一篇基于vue中keep-alive緩存問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue3.2?中新出的?Expose?是做啥用的,新的expose方法是非常直觀的，而且很容易在我們的組件中實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue組件模板及組件互相引用代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
本文主要介紹了vue usePop彈窗控制器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04