快捷導(dǎo)航

vue3 定義使用全局變量的示例詳解

更新時(shí)間：2023年10月17日 09:34:24 作者：代碼就是bug

全局變量（函數(shù)等）可以在任意組件內(nèi)訪問(wèn),可以當(dāng)組件間的傳值使用,這篇文章給大家介紹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= "這是一個(gè)全局變量";
app.mount('#app')

在頁(yè)面中使用

import {getCurrentInstance} from 'vue'
const internalInstance = getCurrentInstance()
//  全局變量
let global=internalInstance.appContext.config.globalProperties;
console.log(global.$key)

getCurrentInstance 只能在 setup 或生命周期鉤子中調(diào)用。

Vue3全局變量使用

全局變量（函數(shù)等）可以在任意組件內(nèi)訪問(wèn)，可以當(dāng)組件間的傳值使用。

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的實(shí)現(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在使用的時(shí)候需要注意

getCurrentInstance 支持訪問(wèn)內(nèi)部組件實(shí)例，用于高階用法或庫(kù)的開發(fā)。
import { getCurrentInstance } from 'vue'
getCurrentInstance 只能在 setup 或生命周期鉤子中調(diào)用。
如需在 setup 或生命周期鉤子外使用，請(qǐng)先在 setup 中調(diào)用 getCurrentInstance() 獲取該實(shí)例然后再使用。

組合式 API | Vue.js中文網(wǎng) (zcopy.site)

到此這篇關(guān)于vue3 定義使用全局變量的文章就介紹到這了,更多相關(guān)vue3 定義使用全局變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: