Vue3?全局實(shí)例上掛載屬性方法案例講解
導(dǎo)語(yǔ)
在大多數(shù)開(kāi)發(fā)需求中，我們有時(shí)需要將某個(gè)數(shù)據(jù)，或者某個(gè)函數(shù)方法，掛載到，全局實(shí)例身上，以便于，在項(xiàng)目全局的任何位置都能夠調(diào)用其方法，或讀取其數(shù)據(jù)。
在Vue2 中，我們是在 main.js 中 直接將數(shù)據(jù)或者方法綁定在 Vue.prototype 身上，在頁(yè)面中，可以直接通過(guò) this.事件名或數(shù)據(jù)名 就能夠拿到數(shù)據(jù)。
let art = () => {
alert("事件方法")
}
import Vue from 'vue'
Vue.prototype.$art = art頁(yè)面中 通過(guò) this 拿取到數(shù)據(jù)方法。
mounted() {
this.$art()
}如今在 Vue3 中，結(jié)合了組合式 Api ，在 setup 函數(shù)中，我們無(wú)法獲取到 this，所以這樣的需求實(shí)現(xiàn)，就得到了變更。 Vue3 提供了一個(gè)新的 Api globalProperties，用來(lái)實(shí)現(xiàn)這樣的需求。
案例中，在 main.js 中定義好一個(gè)回調(diào)函數(shù)的方法。
import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App)
let art = () => {
alert("事件方法")
}
app.config.globalProperties.art = art // 通過(guò) globalProperties 將回調(diào)函數(shù)綁定在全局
app.mount('#app')頁(yè)面中讀取 需要借助于使用 getCurrentInstance Api 鉤子
方法一：
<script setup>
import { getCurrentInstance } from "vue" // 引用 getCurrentInstance
// getCurrentInstance().appContext.config.globalProperties 獲取全局上下文，可以解構(gòu)得到 我們前面綁定的數(shù)據(jù)方法
const { art } = getCurrentInstance().appContext.config.globalProperties
let clicklogin = (formName) => {
art() //直接調(diào)用方法本身
}
</script>方法二：
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance() //獲取 getCurrentInstance 身上的 proxy 代理屬性
let clicklogin = (formName) => {
proxy.art() //可以直接在 proxy代理屬性身上調(diào)用方法。
}
</script>有細(xì)心的小伙伴，會(huì)發(fā)現(xiàn) getCurrentInstance 這個(gè)Api 在官方文檔中，查詢(xún)不到，這是因?yàn)?，在最新的V3 官方文檔中，對(duì) getCurrentInstance 進(jìn)行了移除。
至于為何現(xiàn)在還能使用，據(jù)說(shuō)是現(xiàn)在 作為一個(gè)隱式的內(nèi)部 Api 使用。
上面提到的方法，雖然可以通過(guò) app.config.globalProperties 和 getCurrentInstance 來(lái)定義全局方法數(shù)據(jù)，和讀取數(shù)據(jù)，但是這種方法，并不推薦使用，如下，官方的描述
相比于上面提到的方法，我們更推薦使用 provide 以及 inject 來(lái)實(shí)現(xiàn)全局掛載數(shù)據(jù)方法。
在main.js 中
import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App)
let art = () => {
alert("事件方法")
}
app.provide("art", art) //將要掛載的參數(shù)， 通過(guò) provide ，注入給后代實(shí)例
app.mount('#app')頁(yè)面中：
<script setup>
import { inject } from "vue"
let art = inject("art") // 通過(guò) inject 可以獲取到 全局實(shí)例上 通過(guò) provide 所注入的參數(shù)值。
let clicklogin = (formName) => {
art()
}
</script>以上就是給大家?guī)?lái)的，有關(guān)于在 Vue3 中，如何實(shí)現(xiàn)全局掛載屬性方法。
到此這篇關(guān)于Vue3 全局實(shí)例上掛載屬性方法的文章就介紹到這了,更多相關(guān)Vue3掛載全局屬性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的面包屑和標(biāo)簽tag，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
這篇文章主要介紹了vue 使用vue-i18n做全局中英文切換的實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
本篇文章主要介紹了vue使用watch 觀察路由變化，重新獲取內(nèi)容 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-04-04
自己最近做項(xiàng)目的時(shí)候遇到需要下載文件的需求,索性這里給總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue中下載不同文件五種常用的方式,需要的朋友可以參考下2023-09-09
這兩天學(xué)習(xí)了Vue.js 感覺(jué)組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Element-ui之ElScrollBar組件滾動(dòng)條的使用方法
這篇文章主要介紹了Element-ui之ElScrollBar組件滾動(dòng)條的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09