Vue3在setup組合式API中使用全局掛載的屬性詳解
更新時(shí)間：2025年06月23日 09:20:47 作者：@窮且益堅(jiān)，不墜青云之志
這篇文章主要介紹了Vue3在setup組合式API中使用全局掛載的屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue2中使用的方式
中我們通常在main.js文件中使用Vue.prototype 來綁定全局屬性，之后使用this來調(diào)用。
//在main.js文件 import Vue from 'vue'; import axios from 'axios'; Vue.prototype.$axios = axios; //在其它組件使用，直接用this調(diào)用 this.$axios
Vue3中使用provide 和 inject 來全局掛載（推薦）
在main.js文件中使用，如下
import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts';
let app = createApp(App);
// 全局掛載echarts
app.provide('$echarts',echarts);
app.mount('#app')在其它組件中使用（目前Vue3中該使用setup組合式API）
<script setup>
import { inject, onMounted } from "vue";
//導(dǎo)入掛載的echarts
const echarts = inject("$echarts");
onMounted(() => {
let myChart = echarts.init(document.getElementById('main'));
console.log(myChart);
});
</script>vue3組合式里面（不推薦）
vue3全局掛載屬性方式要通過globalProperties，
//vue3 main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts';
let app = createApp(App);
//全局掛載echarts屬性
app.config.globalProperties.$echarts = echarts;
app.mount('#app')調(diào)用的方式
<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
//調(diào)用
proxy.echarts
</script>注意：
這種方式非常不好，Vue3官網(wǎng)中強(qiáng)烈建議不要把它當(dāng)作在組合式 API 中獲取 this 的替代方案來使用。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue多頁面項(xiàng)目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
今天小編就為大家分享一篇關(guān)于vue中過濾器filter的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue?利用?IndexedDB?實(shí)現(xiàn)前端大文件斷點(diǎn)續(xù)傳功能
這篇文章給大家介紹Vue利用IndexedDB實(shí)現(xiàn)前端大文件斷點(diǎn)續(xù)傳功能,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2026-05-05
在vue項(xiàng)目中假使我們?cè)谕粋€(gè)路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽路由的變化的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue封裝自定義分頁器組件與使用方法的相關(guān)資料,非常的好用,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建的實(shí)現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue響應(yīng)式原理深入解析及注意事項(xiàng)
Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng) —— 模型只是普通對(duì)象，修改它則更新視圖。下面這篇文章主要給大家深入講解了關(guān)于Vue的響應(yīng)式原理，以及Vue響應(yīng)式的一些注意事項(xiàng)，需要的朋友下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了Vue工程模板文件 webpack打包配置,需要的朋友可以參考下2017-12-12
在項(xiàng)目中會(huì)發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象，當(dāng)我們?cè)谑褂胑lement-plus中的圖標(biāo)組件時(shí)會(huì)出現(xiàn)內(nèi)存泄漏，所以本文講給大家講講如何解決vue3中的內(nèi)存泄漏的問題,需要的朋友可以參考下2023-07-07
vue-i18n結(jié)合Element-ui的配置方法
這篇文章主要介紹了vue-i18n結(jié)合Element-ui的配置方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05