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)