Vue3定義全局變量的方式總結(附代碼)
更新時間：2024年04月03日 10:43:40 作者：前端愛好者lxy
vue創(chuàng)建全局變量和方法有很多種,下面這篇文章主要給大家介紹了關于Vue3定義全局變量的方式,文中通過代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下
1、main.js 設置全局變量。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
/** 定義一個函數，用于對象鏈式取值 */
const getObjChainingVal = (obj, keyName) => {
// ...
return tempObj
}
app.config.globalProperties.getObjChainingVal = getObjChainingVal;
/**定義變量$website，并賦值為devcursor**/
app.config.globalProperties.$website = 'devcursor';在其他頁面使用的時候
（1）在模板中使用：
<template>
<div>
作者：{{ getObjChainingVal(data, 'user.info.name') }}
<div>{{ $website }}</div>
</div>
</template>
（2）在語法糖<script setup>里使用：
<script setup>
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const website = app.appContext.config.globalProperties.$website
console.log(website)
// 或者
const { proxy } = getCurrentInstance()
console.log(proxy.$website)
// 使用解構賦值
const { $web } = getCurrentInstance()!.appContext.config.globalProperties
console.log($web)
/**注意！getCurrentInstance()不能在回調函數、方法里使用**/
//若要訪問全局變量，需在函數外面調用getCurrentInstance()
const { proxy } = getCurrentInstance()
//或者
const name = getCurrentInstance().proxy.$website;
const getUserInfo=()=>{
console.log(proxy.$website);
console.log(name);
}
</script>
（3）組件實例中使用
<script>
export default {
mounted() {
console.log(this.$website) // 'devcursor'
}
}
</script>
2、使用provide定義變量、inject獲取變量
（1）父組件使用provide定義變量
import {provide} from "vue";
const data='hello Word';
provide('data',data);（2）子組件通過inject獲取變量
import {inject} from "vue";
const data=inject('data');
console.log(data,'555555555555555555555'); //輸出為：hello Word 附：定義全局函數Vue2 和 Vue3 的區(qū)別
由于 Vue3 沒有 Prototype 屬性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定義全局函數和變量
Vue2：
// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}
Vue3：
// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
定義一個全局變量，示例如下：
app.config.globalProperties.$env = "dev";
在 Vue3 移除了過濾器，定義一個全局函數代替 Filters，示例如下：
app.config.globalProperties.$filters = {
format<T extends any>(str: T): string {
return `銜蟬-${str}`;
}
}總結
到此這篇關于Vue3定義全局變量的方式總結的文章就介紹到這了,更多相關Vue3定義全局變量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli 項目打包完成后運行文件路徑報錯問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例
這篇文章主要介紹了Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最近在使用系統(tǒng)的過程中，業(yè)務人員反饋剛登錄一會就提示token過期需要重新登錄，所以本文為大家分享一個無感刷新的實現(xiàn)代碼，需要的可以參考下2023-07-07
在vue中，子組件如果想修改父組件的變量，一般做法是通過綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用sync修飾符，此方法可以減少很多代碼量2022-08-08
虛擬DOM是一種用JavaScript對象來描述真實DOM的技術,通過diff算法實現(xiàn)高效的DOM更新,提高頁面性能,Vue通過render函數和VNode實現(xiàn)虛擬DOM,結合diff算法減少DOM操作,提升用戶體驗2024-12-12
這篇文章主要給大家介紹了關于利用jsx寫vue組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
vue 綁定使用 touchstart touchmove touchend解析
這篇文章主要介紹了vue 綁定使用 touchstart touchmove touchend解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue和React都是流行的前端框架,它們有很多相似之處,如組件化和使用虛擬DOM,但是,它們在設計理念、組件存在形式、diff優(yōu)化和中文文檔方面存在一些不同,這篇文章給大家介紹面試官常問Vue和React區(qū)別,感興趣的朋友一起看看吧2025-02-02