Vue3使用全局函數(shù)或變量的2種常用方式代碼
更新時間：2023年09月21日 11:19:47 作者：theMuseCatcher
在Vue3項目中需要頻繁使用某一個方法,配置到全局感覺會方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下
例如：想要在index.ts中創(chuàng)建getAction函數(shù)，并可以全局使用：
import { http } from '@/utils/axios'
export function getAction (url: string, params: object) {
return http.request({
url: url,
method: 'get',
params: params
})
}方式一：使用依賴注入（provide/inject）
在main.ts中進行掛載：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { getAction } from 'index'
app.provide('getAction', getAction) // 將getAction方法掛載到全局
app.mount('#app')在要使用的頁面注入：
<script setup lang="ts">
import { inject } from 'vue'
const getAction: any = inject('getAction')
</script>方式二：使用 app.config.globalProperties 和 getCurrentInstance()
- app.config.globalProperties：一個用于注冊能夠被應(yīng)用內(nèi)所有組件實例訪問到的全局屬性的對象
- getCurrentInstance()：// 獲取當前實例，類似于vue2的this
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { getAction } from 'index'
app.config.globalProperties.$getAction = getAction
app.mount('#app')在要使用的頁面中使用：
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
console.log('proxy:', proxy)
console.log('getAction:', proxy.$getAction)
</script>總結(jié)
到此這篇關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式的文章就介紹到這了,更多相關(guān)Vue3使用全局函數(shù)或變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vant是一個專為移動端設(shè)計的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時需要注意版本兼容問題,Vue3項目應(yīng)安裝最新版Vant3,而Vue2項目則需安裝Vant2,安裝錯誤時,需卸載后重新安裝正確版本2024-10-10
這篇文章主要介紹了clipboard在vue中的使用的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)用戶登錄及token驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
在登錄頁面需要啟動向右滑塊驗證功能,遇到這樣的需求怎么實現(xiàn)呢,下面小編通過示例代碼給大家分享Vue3滑動到最右驗證功能實現(xiàn),感興趣的朋友一起看看吧2024-06-06
本文給大家總結(jié)ES6新特性：默認參數(shù)、reduce、解構(gòu)賦值和Set在使用時的一些小技巧。需要的朋友參考下吧2018-04-04
vue設(shè)置全局變量5種方法(讓你的數(shù)據(jù)無處不在)
這篇文章主要給大家介紹了關(guān)于vue設(shè)置全局變量的5種方法,通過設(shè)置的方法可以讓你的數(shù)據(jù)無處不在,在項目中經(jīng)常會復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設(shè)為全局的就顯得很重要了,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了使用vue實現(xiàn)玉兔迎春圖高亮示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01