###
Vue3 中定义和
使用全局函数的方法
在
Vue3 中，可以通过多种方式定义并
使用全局函数。以下是几种常见的实现方法及其具体操作：
#### 方法一：通过 `globalProperties` 添加
全局函数
可以在创建
Vue 应用实例时，利用 `app.config.globalProperties` 来定义
全局函数。这些
函数可以被整个应用内的所有
组件访问。
```
javascript
// main.js 或 main.ts
import { createApp } from '
vue';
import App from './App.
vue';
const app = createApp(App);
// 定义
全局函数
app.config.globalProperties.$showMessage = function (message) {
alert(message);
};
app.mount('#app');
```
在
组件中调用此
全局函数的方式如下：
```
javascript
this.$showMessage('这是一个提示信息');
```
这种方式简单直观，但在 TypeScript 环境下可能会遇到类型推导问题[^1]。
---
#### 方法二：通过 `provide/inject` 实现依赖注入
另一种更灵活的方式是
使用 Vue 的 `provide/inject` API，在父级
组件提供数据或方法，并让子
组件注入
使用。
##### 步骤 1：定义
全局工具模块
```typescript
// src/utils/calculate.ts
export default {
sum
: function (a
: number, b
: number) {
return a + b;
}
};
```
##### 步骤 2：在入口文件中提供
全局对象
```typescript
// main.ts
import calculate from './utils/calculate';
import { createApp } from '
vue';
import App from './App.
vue';
const app = createApp(App);
// 提供
全局计算工具
app.provide('calculate', calculate);
app.mount('#app');
```
##### 步骤 3：在
组件中注入并
使用
```typescript
<script setup lang="ts">
import { inject } from '
vue';
// 注入
全局工具
const calculate = inject<any>('calculate');
if (calculate) {
const result = calculate.sum(1, 2);
console.log(result); // 输出 3
}
</script>
```
需要注意的是，`inject` 返回的值默认为 `unknown` 类型，因此需要显式指定类型或将类型忽略[^2]。
---
#### 方法三：结合 `getCurrentInstance()` 访问
全局属性
如果希望在组合式 API (`<script setup>` 或 `setup`) 中
使用全局函数，可以通过 `getCurrentInstance()` 获取当前
组件实例。
##### 步骤 1：定义
全局函数
```typescript
// main.ts
import { createApp } from '
vue';
import App from './App.
vue';
import { getAction } from './utils/actions';
const app = createApp(App);
// 将自定义方法挂载到 globalProperties
app.config.globalProperties.$getAction = getAction;
app.mount('#app');
```
##### 步骤 2：在
组件中获取并
使用
```typescript
<script setup lang="ts">
import { getCurrentInstance } from '
vue';
// 获取当前实例
const instance = getCurrentInstance();
if (instance) {
const actionResult = instance.appContext.config.globalProperties.$getAction();
console.log(actionResult);
}
</script>
```
这种方法适用于 `<script setup>` 场景下的
全局函数调用，但同样存在类型推导问题，通常需要配合 `@ts-ignore`
使用[^3]。
---
#### 方法四：扩展
Vue 的接口以支持 TypeScript 类型安全
为了使
全局函数在 TypeScript 下具有更好的类型支持，可以通过扩展
Vue 的 `ComponentCustomProperties` 接口来声明
全局属性。
##### 步骤 1：声明
全局类型
```typescript
declare module '
vue' {
export interface ComponentCustomProperties {
$filters
: {
format<T>(str
: T)
: string;
};
}
}
// main.ts
import { createApp } from '
vue';
import App from './App.
vue';
const app = createApp(App);
// 定义
全局过滤器
app.config.globalProperties.$filters = {
format<T>(str
: T) {
return `formatted-${String(str)}`;
}
};
app.mount('#app');
```
##### 步骤 2：在模板中直接
使用
```html
<template>
<div>{{ $filters.format('测试字符串') }}</div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from '
vue';
const instance = getCurrentInstance();
console.log(instance?.proxy?.$filters.format('测试'));
</script>
```
这种做法不仅提供了更强的类型安全性，还增强了代码可读性和维护性[^5]。
---
### 总结
以上介绍了四种在
Vue3 中定义和
使用全局函数的主要方法：
1. **`globalProperties`**：适合快速添加简单的
全局功能。
2. **`provide/inject`**：更适合复杂场景下的依赖管理。
3. **`getCurrentInstance()`**：适配组合式 API 需求。
4. **TypeScript 扩展接口**：增强类型安全性的最佳实践。
每种方法各有优劣，开发者可以根据实际需求选择最合适的方案。
---
扫一扫
3101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
