在vue3中使用ts定义全局方法和变量

在 Vue 3 中使用 TypeScript 定义全局方法和变量的方式与 Vue 2 有些不同。下面分别给出定义全局方法和全局变量的方法。

### 定义全局方法

可以在 `src/main.ts` 文件中定义全局方法，例如：

import { createApp } from 'vue';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $myGlobalMethod: () => void;
  }
}

const app = createApp(App);
app.config.globalProperties.$myGlobalMethod = () => {
  console.log('This is a global method!');
};
app.mount('#app');

在上面的例子中，我们使用 `declare module` 声明了一个模块，然后在 `ComponentCustomProperties` 接口中添加了一个 `$myGlobalMethod` 属性，它是一个函数类型，不接收参数，返回值为 `void`。接着，我们在 `app.config.globalProperties` 上挂载了实现该方法的函数。

这样，在 Vue 应用程序的任意组件中都可以使用 `$myGlobalMethod` 方法，例如：

<template>
  <button @click="$myGlobalMethod()">Click me!</button>
</template>

### 定义全局变量

可以在 `src/main.ts` 文件中定义全局变量，例如：

import { createApp } from 'vue';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $myGlobalVariable: string;
  }
}

const app = createApp(App);
app.config.globalProperties.$myGlobalVariable = 'This is a global variable!';
app.mount('#app');

在上面的例子中，我们同样使用 `declare module` 声明了一个模块，然后在 `ComponentCustomProperties` 接口中添加了一个 `$myGlobalVariable` 属性，它是一个字符串类型。接着，我们在 `app.config.globalProperties` 上挂载了该全局变量的值。

这样，在 Vue 应用程序的任意组件中都可以使用 `$myGlobalVariable` 变量，例如：

<template>
  <p>{{ $myGlobalVariable }}</p>
</template>