vue3中如何实现定义全局变量

在Vue 3中，可以通过创建一个app.config.globalProperties属性来定义全局变量。

具体步骤如下：

1. 在项目中找到main.js文件，创建一个Vue对象，并创建一个名为config的对象：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$myGlobalVariable = '这是一个全局变量'

1. 在Vue 3中，可以在模板中直接访问全局变量，无需通过this访问。例如，可以在组件中定义一个变量，并在模板中直接访问它：

<template>
  <div>{{ $myGlobalVariable }}</div>
</template>

<script>
export default {
  created() {
    console.log(this.$myGlobalVariable) // 输出 '这是一个全局变量'
  }
}
</script>

1. 示例2 需要使用“provide/inject”方法发布和接收全局变量。首先，我们需要在顶层父组件中添加“provide”属性，用于声明要发布的变量：

// App.vue

<script>
import { provide } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  provide: {
    myGlobalVariable: '这是一个全局变量'
  }
}
</script>

1. 然后，在子组件中，可以使用“inject”属性来访问这个变量：

// MyComponent.vue

<template>
  <div>{{ myGlobalVariable }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  created() {
    console.log(this.myGlobalVariable) // 输出 '这是一个全局变量'
  },
  inject: ['myGlobalVariable']
}
</script>

综上所述，Vue 3中实现定义全局变量，有两种方法：一种是直接将全局变量添加到app.config.globalProperties属性中，可以在模板中直接访问；另一种方法是使用“provide/inject”方法，在父组件中声明全局变量，子组件中使用“inject”属性访问它。