vue3+ts想在app.config中声明自定义变量怎么写
时间: 2024-02-09 21:09:10 浏览: 85
在vue3+ts+setup语法糖中使用图片预览组件
在Vue3中,可以通过在 `main.ts` 或 `main.js` 文件中导出 `createApp` 函数时传入 `app.config.globalProperties` 来声明全局变量。同时,使用 TypeScript 可以在 `main.ts` 文件中定义全局变量的类型。
以下是一个示例:
```typescript
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$myGlobalVar: string;
}
}
const app = createApp(App);
app.config.globalProperties.$myGlobalVar = 'Hello World';
app.mount('#app');
```
在上面的代码中,我们使用 `declare module` 来扩展 `ComponentCustomProperties` 接口,从而为 `$myGlobalVar` 声明类型。在 `createApp` 函数中,我们将 `App` 组件挂载到 `app` 实例中,并使用 `app.config.globalProperties` 声明全局变量 `$myGlobalVar`。
现在,我们可以在任何组件中通过 `$myGlobalVar` 来访问全局变量,并且 TypeScript 会自动进行类型检查。
阅读全文