vue3 全局变量

// 创建 Vue 3 应用并设置全局变量

// 导入 Vue
import { createApp } from 'vue';

// 创建一个全局属性对象
const globalProperties = {
  myGlobalVar: 'Hello, this is a global variable!'
};

// 创建 Vue 应用实例
const app = createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  methods: {
    // 在方法中使用全局变量
    logGlobalVar() {
      console.log(this.$myGlobalVar);
    }
  }
});

// 使用 `app.config.globalProperties` 添加全局变量
app.config.globalProperties.$myGlobalVar = globalProperties.myGlobalVar;

// 挂载应用到 DOM 中
app.mount('#app');

// 在组件中使用全局变量
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ $myGlobalVar }}</p>
    <button @click="logGlobalVar">Log Global Variable</button>
  </div>
</template>

解释说明：

1. 创建 Vue 应用：我们首先导入 Vue 并创建一个 Vue 应用实例。
2. 定义全局变量：通过 app.config.globalProperties，我们可以向所有组件添加全局属性和方法。这里我们添加了一个名为 $myGlobalVar 的全局变量。
3. 在组件中使用全局变量：在模板中，可以直接使用 {{ $myGlobalVar }} 来访问全局变量。在方法中也可以通过 this.$myGlobalVar 访问它。
4. 挂载应用：最后，我们将应用挂载到指定的 DOM 元素上。

这样，你就可以在整个应用中轻松访问这个全局变量了。