vue3 设置全局变量
时间: 2023-09-17 12:07:57 浏览: 114
详解Vue 全局变量,局部变量
5星 · 资源好评率100%
在 Vue 3 中,你可以使用 `createApp` 函数中的 `provide` 方法来创建全局变量。
假设你要创建一个名为 `myGlobalVar` 的全局变量,可以在 `main.js` 中这样写:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.provide('myGlobalVar', 'Hello, World!');
app.mount('#app');
```
然后,在你的组件中,可以使用 `inject` 方法来访问这个全局变量:
```javascript
import { inject } from 'vue';
export default {
setup() {
const myVar = inject('myGlobalVar');
// 现在,myVar 就是 'Hello, World!'
}
}
```
注意,`provide` 方法提供的全局变量是响应式的,也就是说,如果你在组件中改变了这个变量的值,所有使用了这个变量的组件都会自动更新。如果你需要使用一个不可变的全局变量,可以将它设置为一个常量或者一个只读属性。
阅读全文