vue3全局变量的使用
时间: 2023-08-28 09:16:55 浏览: 54
在Vue 3中,可以使用Vue的全局API来定义和使用全局变量。以下是一些使用全局变量的方法:
1. 使用app.config.globalProperties:可以通过app.config.globalProperties将变量添加到Vue的全局作用域中。这样,你就可以在整个应用程序中访问该变量。例如:
```javascript
// main.js
import { createApp } from 'vue'
const app = createApp(App)
app.config.globalProperties.$myGlobalVariable = 'Hello, Vue 3!'
app.mount('#app')
```
然后,在组件中,你可以通过`this.$myGlobalVariable`来访问全局变量:
```vue
<template>
<div>
{{ $myGlobalVariable }}
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$myGlobalVariable) // 输出:Hello, Vue 3!
}
}
</script>
```
2. 使用provide/inject:这是Vue 3中新引入的组件间通信方法。你可以在父组件中使用provide来提供全局变量,然后在子组件中使用inject来注入该变量。例如:
```vue
<!-- Parent.vue -->
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import { provide } from 'vue'
export default {
setup() {
provide('myGlobalVariable', 'Hello, Vue 3!')
}
}
</script>
<!-- Child.vue -->
<template>
<div>
{{ myGlobalVariable }}
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const myGlobalVariable = inject('myGlobalVariable')
return { myGlobalVariable }
}
}
</script>
```
无论你选择哪种方法,都可以在Vue 3中使用全局变量。请根据你的实际需求选择最适合的方法。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)