Vue3實(shí)現(xiàn)掛載全局方法和用getCurrentInstance代替this
Vue3掛載全局方法和用getCurrentInstance代替this
平時(shí)我們?cè)陂_(kāi)發(fā)vue項(xiàng)目的時(shí)候，要把一些函數(shù)、方法、組件或插件掛在全局上方便項(xiàng)目上每一個(gè)頁(yè)面或模塊調(diào)用，在vue2.x的時(shí)候，在main.js只要用Vue.prototype就能完成，之后在頁(yè)面上用this來(lái)調(diào)用，如：
main.js:
調(diào)用
在vue3.0的時(shí)候掛在全局方法就不一樣，通過(guò) app.config.globalProperties來(lái)掛載，如掛載axios：
方法一
但是切記掛載任何東西之前不能createApp(App)后面不能連綴use()或mount('#app')，如：
或者
方法二
把封裝的函數(shù)和api掛載在全局變量install方法里，之后導(dǎo)出
在main.js 引入，
但是在vue3.0的時(shí)候如果用組合api，由于 setup 在生命周期 beforecreate 和 created 前執(zhí)行，此時(shí) vue 對(duì)象還未創(chuàng)建，因無(wú)法使用我們?cè)?vue2.x 常用的 this。
那就用 getCurrentInstance代替this，首先引入，之后聲明如下：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用wangEditor實(shí)現(xiàn)自定義粘貼功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用wangEditor實(shí)現(xiàn)自定義粘貼功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析
這篇文章主要介紹了vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的方法
這篇文章主要介紹了使用vue實(shí)現(xiàn)HTML頁(yè)面生成圖片的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
解決vue中數(shù)據(jù)更新視圖不更新問(wèn)題this.$set()方法
這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問(wèn)題this.$set()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
下面小編就為大家?guī)?lái)一篇vue2.X組件學(xué)習(xí)心得(新手必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue前端開(kāi)發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù)，所謂的輔助函數(shù)分別對(duì)State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡(jiǎn)化2021-10-10
vue通過(guò)elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們?cè)陂_(kāi)發(fā)中經(jīng)常會(huì)遇到通過(guò)點(diǎn)擊某個(gè)按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09