vue3 定義使用全局變量的示例詳解
更新時間：2023年10月17日 09:34:24 作者：代碼就是bug
全局變量（函數(shù)等）可以在任意組件內訪問,可以當組件間的傳值使用,這篇文章給大家介紹vue3 定義使用全局變量的示例詳解,感興趣的朋友跟隨小編一起看看吧
vue3 定義使用全局變量
在main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入router
import router from './route/index'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
// 定義全局變量
app.config.globalProperties.$key= "這是一個全局變量";
app.mount('#app')在頁面中使用
import {getCurrentInstance} from 'vue'
const internalInstance = getCurrentInstance()
// 全局變量
let global=internalInstance.appContext.config.globalProperties;
console.log(global.$key)getCurrentInstance 只能在 setup 或生命周期鉤子中調用。
Vue3全局變量使用
全局變量（函數(shù)等）可以在任意組件內訪問，可以當組件間的傳值使用。
main.js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.config.globalProperties.$global_id=10;
app.config.globalProperties.$global_name="test";
app.provide('global_code', "code");
app.config.globalProperties.global_value="value";
app.mount('#app');App.vue
<template>
<main>
<button @click="clicked">全局變量</button>
</main>
</template>
<script>
import {inject, getCurrentInstance } from 'vue'
export default {
setup () {
const { proxy } = getCurrentInstance();
const codec = inject("global_code");
function clicked(params) {
console.log(proxy.$systemId)
console.log("global_id:",proxy.$global_id)
console.log("global_name:",proxy.$global_name);
console.log("global_value:",proxy.global_value);
console.log("codec:", codec);
}
return {clicked}
}
}
</script>
<!-- <script setup>
//setup的實現(xiàn)
import { inject,getCurrentInstance } from 'vue'
const codec = inject("global_code");
const instance = getCurrentInstance();
function clicked()
{
console.log("test");
console.log("global_id:",instance.appContext.config.globalProperties.$global_id)
console.log("global_name:",instance.proxy.$global_name);
console.log("global_value:",instance.proxy.global_value);
console.log("codec:", codec);
}
</script> -->getCurrentInstance在使用的時候需要注意
getCurrentInstance 支持訪問內部組件實例，用于高階用法或庫的開發(fā)。
import { getCurrentInstance } from 'vue'
getCurrentInstance 只能在 setup 或生命周期鉤子中調用。
如需在 setup 或生命周期鉤子外使用，請先在 setup 中調用 getCurrentInstance() 獲取該實例然后再使用。
組合式 API | Vue.js中文網(wǎng) (zcopy.site)
到此這篇關于vue3 定義使用全局變量的文章就介紹到這了,更多相關vue3 定義使用全局變量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vue移動端使用appClound拉起支付寶支付的實現(xiàn)方法
這篇文章主要介紹了vue移動端使用appClound拉起支付寶支付的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
今天小編就為大家分享一篇vue根據(jù)進入的路由進行原路返回的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue-cli之router基本使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
vue如何通過router-link或者button跳轉到一個新的頁面
這篇文章主要介紹了vue如何通過router-link或者button跳轉到一個新的頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3?目前已經(jīng)趨于穩(wěn)定,不少代碼庫都已經(jīng)開始使用它,很多項目未來也必然要遷移至Vue3,本文記錄了使用Vue3時遇到的一些問題,希望能對大家有所幫助2023-09-09
這篇文章主要介紹了使用vue-print-nb打印el-table問題總結,通過實例代碼介紹了vue-print-nb 打印功能,本文結合實例代碼講解的非常詳細,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
今天小編就為大家分享一篇對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關于vue.js項目中實用的小技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11