Vue3使用全局函數(shù)或變量的2種常用方式代碼
更新時(shí)間：2023年09月21日 11:19:47 作者：theMuseCatcher
在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺會(huì)方便很多,這篇文章主要給大家介紹了關(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中進(jìn)行掛載：
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：一個(gè)用于注冊能夠被應(yīng)用內(nèi)所有組件實(shí)例訪問到的全局屬性的對象
- getCurrentInstance()：// 獲取當(dāng)前實(shí)例，類似于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)文章
詳解vue-cli項(xiàng)目在IE瀏覽器打開報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue-cli項(xiàng)目在IE瀏覽器打開報(bào)錯(cuò)解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家介紹了vue shallowRef作用及引發(fā)問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue中使用vue-count-to(數(shù)字滾動(dòng)插件)詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Vue中使用vue-count-to(數(shù)字滾動(dòng)插件)的相關(guān)資料,最近需要開發(fā)一個(gè)數(shù)字滾動(dòng)效果,在網(wǎng)上找到一個(gè)關(guān)于vue-countTo的插件,覺得這個(gè)插件還不錯(cuò),需要的朋友可以參考下2023-09-09
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中實(shí)現(xiàn)動(dòng)態(tài)生成二維碼的方法
這篇文章主要介紹了vue中實(shí)現(xiàn)動(dòng)態(tài)生成二維碼的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
詳解Vue-cli 創(chuàng)建的項(xiàng)目如何跨域請求
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項(xiàng)目如何跨域請求 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue公共loading升級版解決思路(處理并發(fā)異步差時(shí)響應(yīng))
這篇文章主要介紹了Vue公共loading升級版（處理并發(fā)異步差時(shí)響應(yīng)）,解決思路是通過定義一個(gè)全局對象來存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫，需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue之el-option下拉框綁定問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解VUE Element-UI多級菜單動(dòng)態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級菜單動(dòng)態(tài)渲染的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04