Vue3 app.config.globalProperties 属性

Vue3 全局 API Vue3 全局 API

app.config.globalProperties 是 Vue 应用实例的一个配置项，它允许我们向全局添加一些自定义的属性或方法。这些属性或方法可以在应用的任何组件中直接通过 this 访问。

如何使用 globalProperties？

1. 创建 Vue 应用实例

首先，我们需要创建一个 Vue 应用实例，然后通过 app.config.globalProperties 来添加全局属性或方法。

实例

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

const app = createApp(App);

2. 添加全局属性或方法

我们可以通过 app.config.globalProperties 来添加全局属性或方法。例如，我们添加一个全局方法 $greet：

实例

app.config.globalProperties.$greet = function(name) {
  console.log(`Hello, ${name}!`);
};

app.mount('#app');

3. 在组件中使用全局属性或方法

一旦我们添加了全局方法 $greet，我们可以在任何组件中通过 this 直接调用它：

实例

<template>
  <button @click="sayHello">Say Hello</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      this.$greet('Vue Developer');
    }
  }
}
</script>

当点击按钮时，控制台会输出 Hello, Vue Developer!。

globalProperties 的应用场景

1. 全局工具方法

globalProperties 非常适合用来定义一些全局的工具方法。例如，我们可以定义一个全局的格式化日期的方法：

实例

app.config.globalProperties.$formatDate = function(date) {
  return new Date(date).toLocaleDateString();
};

然后在任何组件中都可以使用这个方法：

实例

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
export default {
  data() {
    return {
      date: '2025-03-10'
    };
  },
  computed: {
    formattedDate() {
      return this.$formatDate(this.date);
    }
  }
}
</script>

2. 全局配置参数

我们还可以使用 globalProperties 来定义一些全局的配置参数。例如，我们可以定义一个全局的 API URL：

实例

app.config.globalProperties.$apiUrl = 'https://api.example.com';

然后在组件中使用这个参数：

实例

<script>
export default {
  created() {
    console.log('API URL:', this.$apiUrl);
  }
}
</script>

3. 插件扩展

在开发 Vue 插件时，globalProperties 也是一个非常常用的工具。通过它，插件可以向全局添加一些方法或属性，从而简化插件的使用。

例如，我们可以开发一个简单的日志插件：

实例

const Logger = {
  install(app) {
    app.config.globalProperties.$log = function(message) {
      console.log(`[LOG]: ${message}`);
    };
  }
};

app.use(Logger);

然后在组件中使用这个日志方法：

实例

<script>
export default {
  mounted() {
    this.$log('Component is mounted!');
  }
}
</script>

注意事项

  1. 命名冲突：由于 globalProperties 是全局的，因此在命名时需要小心，避免与其他库或插件的方法或属性冲突。
  2. 类型安全：如果你使用的是 TypeScript，可能需要为 globalProperties 添加类型定义，以确保类型安全。

Vue3 全局 API Vue3 全局 API