快捷導(dǎo)航

Vue3使用全局函數(shù)或變量的2種常用方式代碼

更新時(shí)間：2023年09月21日 11:19:47 作者：theMuseCatcher

在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺(jué)會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下

方式一：使用依賴注入（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')

在要使用的頁(yè)面注入：

<script setup lang="ts">
import { inject } from 'vue'
const getAction: any = inject('getAction')
</script>

方式二：使用 app.config.globalProperties 和 getCurrentInstance()

app.config.globalProperties：一個(gè)用于注冊(cè)能夠被應(yīng)用內(nèi)所有組件實(shí)例訪問(wèn)到的全局屬性的對(duì)象
getCurrentInstance()：// 獲取當(dāng)前實(shí)例，類(lèi)似于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')

在要使用的頁(yè)面中使用：

<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ù)或變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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