Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
更新時(shí)間：2024年01月15日 10:24:08 作者：小馬甲丫
Vue3中的app.config.globalProperties是一個(gè)強(qiáng)大的全局配置功能,允許我們?cè)趹?yīng)用級(jí)別設(shè)置和訪問(wèn)屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
一、概念
一個(gè)用于注冊(cè)能夠被應(yīng)用內(nèi)所有組件實(shí)例訪問(wèn)到的全局屬性的對(duì)象。點(diǎn)擊【前往】訪問(wèn)官網(wǎng)
二、實(shí)踐
2.1、定義
在main.ts文件中設(shè)置app.config.globalPropertie
import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import Pagination from '@/components/Pagination/index.vue';
const app = createApp(App);
//全局方法
app.config.globalProperties.$type = '類(lèi)型';
app.component('Pagination', Pagination)
app.use(router);
app.use(ElementPlus);
app.mount('#app');
2.2、使用
在Vue文件中使用getCurrentInstance()，通過(guò)proxy.$type就可以調(diào)用上面定義的方法
<template>
<el-input v-model="proxy.$type" />
<template>
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
console.log(proxy.$type)
</script>
三、最后
到此這篇關(guān)于Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 app.config.globalProperties內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element中el-autocomplete的常見(jiàn)用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見(jiàn)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
webpack4打包vue前端多頁(yè)面項(xiàng)目
這篇文章主要介紹了webpack4打包vue前端多頁(yè)面項(xiàng)目的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了淺談Vue 函數(shù)式組件的使用技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue項(xiàng)目中引入ESLint校驗(yàn)代碼避免代碼錯(cuò)誤
這篇文章主要為大家介紹了Vue項(xiàng)目中引入ESLint插件校驗(yàn)代碼避免代碼錯(cuò)誤的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue實(shí)現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關(guān)資料,需要的朋友可以參考下2017-09-09
一文詳解vue3項(xiàng)目實(shí)戰(zhàn)中的接口調(diào)用
在企業(yè)開(kāi)發(fā)過(guò)程中,往往有著明確的前后端的分工,前端負(fù)責(zé)接收、使用接口,后端負(fù)責(zé)編寫(xiě)、處理接口,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目實(shí)戰(zhàn)中的接口調(diào)用的相關(guān)資料,需要的朋友可以參考下2022-12-12
手把手教你vue實(shí)現(xiàn)動(dòng)態(tài)路由
動(dòng)態(tài)路由可以根據(jù)不同用戶登錄獲取不一樣的路由層級(jí),可隨時(shí)調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家介紹了vue2使用eventbus踩坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06