vue3使用globalProperties
时间: 2023-07-14 21:10:24 浏览: 53
Vue 3 中的 globalProperties 是一个新的特性,它允许我们在应用程序的任何地方访问全局属性或方法。
要使用 globalProperties,你需要在创建 Vue 应用程序实例之前,通过 `app.config.globalProperties` 方法将属性或方法添加到全局范围内。例如,假设我们想在应用程序中访问一个名为 `api` 的全局属性,可以按照以下步骤操作:
1. 导入 `createApp` 函数和你的应用组件:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
```
2. 创建 Vue 应用程序实例:
```javascript
const app = createApp(App);
```
3. 使用 `app.config.globalProperties` 添加全局属性:
```javascript
app.config.globalProperties.api = 'https://example.com/api';
```
现在,你就可以在任何组件中使用 `$api` 来访问这个全局属性了:
```javascript
export default {
mounted() {
console.log(this.$api); // 输出 https://example.com/api
}
}
```
除了添加属性,你还可以添加全局方法。例如,我们可以添加一个名为 `$log` 的全局方法来简化日志记录:
```javascript
app.config.globalProperties.$log = (message) => {
console.log(`[LOG]: ${message}`);
};
```
现在,在任何组件中都可以使用 `$log` 方法来记录日志:
```javascript
export default {
mounted() {
this.$log('Hello, world!'); // 输出 [LOG]: Hello, world!
}
}
```
这就是 Vue 3 中使用 globalProperties 的基本用法。希望能对你有所帮助!
相关推荐
![](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)