Vue3全局变量使用

全局变量（函数等）可以在任意组件内访问，可以当组件间的传值使用。

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的实现
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 支持访问内部组件实例，用于高阶用法或库的开发。
import { getCurrentInstance } from 'vue'
getCurrentInstance 只能在 setup 或生命周期钩子中调用。
如需在 setup 或生命周期钩子外使用，请先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。

组合式 API | Vue.js中文网 (zcopy.site)