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