vue定义全局变量

// 在 Vue 项目中定义全局变量的方式有多种，以下是几种常见的方法：

// 方法一：在 Vue 实例创建之前定义全局变量
// 这种方式适用于所有组件都可以访问的全局变量

// main.js
globalThis.globalVar = '这是全局变量'; // 使用 globalThis 来定义全局变量，兼容性更好

new Vue({
  render: h => h(App),
}).$mount('#app');

// 现在可以在任何组件中通过 window.globalVar 或 globalThis.globalVar 访问这个全局变量

// 方法二：使用 Vue.prototype 定义全局变量（Vue 2.x）
// 这种方式适用于 Vue 2.x 版本

// main.js
Vue.prototype.$globalVar = '这是全局变量';

new Vue({
  render: h => h(App),
}).$mount('#app');

// 现在可以在任何组件中通过 this.$globalVar 访问这个全局变量

// 方法三：使用 provide / inject (推荐)
// 这种方式适用于父子组件之间的依赖注入，更加灵活和模块化

// main.js 或父组件
new Vue({
  provide() {
    return {
      globalVar: '这是全局变量'
    };
  },
  render: h => h(App),
}).$mount('#app');

// 子组件中
export default {
  inject: ['globalVar'],
  mounted() {
    console.log(this.globalVar); // 输出: 这是全局变量
  }
};

解释说明：

1. 方法一：通过 globalThis 定义全局变量，这种方式适用于所有环境，并且可以在任何地方通过 window.globalVar 或 globalThis.globalVar 访问。
2. 方法二：在 Vue 2.x 中，可以通过 Vue.prototype 添加全局属性，然后在任何组件中通过 this.$globalVar 访问。
3. 方法三：使用 provide 和 inject，这是一种更模块化和灵活的方式，适用于父子组件之间的依赖注入。