vue3.0+typescript 扩展全局自定义属性接口

最新推荐文章于 2025-04-17 22:21:51 发布

或许丶

最新推荐文章于 2025-04-17 22:21:51 发布

阅读量5.3k

点赞数 1

分类专栏： vue3.0 typescript 文章标签： vue typescript

本文链接：https://blog.youkuaiyun.com/qq_36189935/article/details/107762950

版权

本文介绍了如何在Vue3.0项目中结合TypeScript，进行全局自定义属性接口的扩展。通过自定义Vue的全局属性，可以增强组件的功能和灵活性，同时利用TypeScript提供更严格的类型检查和更好的开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// vue3.0+ts this.$axios中报错, 按照vue2.*中扩展合并'vue/types/vue' 模块失效
Property '$axios' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, Record<string, any>, Readonly<{}>, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<...>, string>>'.Vetur(2339)

// 下面是在vue3.0定义源文件找到的一段说明注释
/**
 * Custom properties added to component instances in any way and can be accessed through `this`
 *
 * @example
 * Here is an example of adding a property `$router` to every component instance:
 * ```ts
 * import { createApp } from 'vue'
 * import { Router, createRouter } from 'vue-router'
 *
 * declare module '@vue/runtime-core' {
 *   interface ComponentCustomProperties {
 *     $router: Router
 *   }
 * }
 *
 * // effectively adding the router to every component instance
 * const app = createApp(