Vue 2 和 Vue 3 定义全局变量的方法

在 Vue.js 中，有多种方法可以定义全局变量。下面我们将分别介绍在 Vue 2 和 Vue 3 中定义全局变量的方法，并提供相应的使用示例。

Vue 2

1. 通过 Vue.prototype

你可以通过 Vue.prototype 来添加全局属性，这样所有的 Vue 实例都可以访问这个属性。

Vue.prototype.$globalVar = '我是一个全局变量';

new Vue({
  created() {
    console.log(this.$globalVar); // 输出: "我是一个全局变量"
  }
});

2. 通过全局混入

你也可以使用全局混入来添加全局变量。

Vue.mixin({
  data() {
    return {
      globalVar: '我是一个全局变量'
    }
  }
});

new Vue({
  created() {
    console.log(this.globalVar); // 输出: "我是一个全局变量"
  }
});

Vue 3

1. 通过全局 API

在 Vue 3 中，你可以使用 app.config.globalProperties 来定义全局变量。

import { createApp } from 'vue';

const app = createApp({});

app.config.globalProperties.$globalVar = '我是一个全局变量';

app.mount('#app');

在组件中，你可以通过 this.$globalVar 来访问这个全局变量。

2. 通过 provide/inject

你还可以使用 provide 和 inject 来创建全局变量。

import { createApp, provide } from 'vue';

const app = createApp({
  setup() {
    provide('globalVar', '我是一个全局变量');
  }
});

app.mount('#app');

在任何子组件中，你可以使用 inject 来访问这个全局变量。

import { inject } from 'vue';

export default {
  setup() {
    const globalVar = inject('globalVar');
    console.log(globalVar); // 输出: "我是一个全局变量"
  }
};

希望这份文档能够帮助你在 Vue 2 和 Vue 3 中成功定义和使用全局变量！