Vue3定義全局變量的方式總結(jié)(附代碼)
更新時間：2024年04月03日 10:43:40 作者：前端愛好者lxy
vue創(chuàng)建全局變量和方法有很多種,下面這篇文章主要給大家介紹了關(guān)于Vue3定義全局變量的方式,文中通過代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下
1、main.js 設(shè)置全局變量。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
/** 定義一個函數(shù)，用于對象鏈式取值 */
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)
// 使用解構(gòu)賦值
const { $web } = getCurrentInstance()!.appContext.config.globalProperties
console.log($web)
/**注意！getCurrentInstance()不能在回調(diào)函數(shù)、方法里使用**/
//若要訪問全局變量，需在函數(shù)外面調(diào)用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 附：定義全局函數(shù)Vue2 和 Vue3 的區(qū)別
由于 Vue3 沒有 Prototype 屬性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定義全局函數(shù)和變量
Vue2：
// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}
Vue3：
// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
定義一個全局變量，示例如下：
app.config.globalProperties.$env = "dev";
在 Vue3 移除了過濾器，定義一個全局函數(shù)代替 Filters，示例如下：
app.config.globalProperties.$filters = {
format<T extends any>(str: T): string {
return `銜蟬-${str}`;
}
}總結(jié)
到此這篇關(guān)于Vue3定義全局變量的方式總結(jié)的文章就介紹到這了,更多相關(guān)Vue3定義全局變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前段時間一直在學習vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了關(guān)于vxe-table復選框翻頁選中問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue3中自定義指令的實踐，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了vue定義全局變量和全局方法的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue實現(xiàn)百度搜索下拉提示功能實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在現(xiàn)代Web應(yīng)用中,隨機生成驗證碼、卡密等是一項常見需求,對于開發(fā)人員來說,如何在表單中快速生成一個符合格式的隨機卡密,并與其他表單字段一同提交,是一個常見的場景,本篇文章將詳細介紹如何在Vue.js框架中實現(xiàn)一個隨機卡密生成功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue中使用mxgraph的方法實例代碼詳解,需要的朋友可以參考下2019-05-05
異步組件是實現(xiàn)這一目標的一種高效方式,它允許Vue在需要時才加載組件的代碼,從而顯著減少應(yīng)用的初始加載時間,這篇文章主要介紹了Vue中import為什么可以異步加載的相關(guān)資料,需要的朋友可以參考下2026-05-05