vue+ts中引入组件自动提示 declare module

在我们引入vant UI 组件库时只要我们输入一个<van- 就会出来很多提示，只要你记得组件的单词或者字母，就可以直接使用，非常的方便。

它是如何实现的呢？

我们随便双击一个vant组件进入到index.d.ts中

// 核心代码
// 1. 导入组件实例
import NavBar from './NavBar.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {// 3. 给 vue  添加全局组件类型，interface 和之前的合并interface GlobalComponents {// 4. 定义具体组件类型，typeof 获取到组件实例类型// typeof 作用是得到对应的TS类型VanNavBar: typeof NavBar;//5. 如果有多个可以继续往下写}
}

可以发现用到了ts中的 declare module 意为声明模块，可以让vue知道这是一个组件，当然我们自己定义的组件，使用相同的语法同样可以实现

例如 types/components.d.ts

import CpNavBar from '@/components/CpNavBar.vue'declare module 'vue' {interface GlobalComponents {CpNavBar: typeof CpNavBar// 可以写入多个}
}

使用：

vue+ts中引入组件自动提示 declare module相关推荐

Vue项目中components组件的使用笔记
目录前言一.components和component的区别? 二.components使用的步骤 1.创建组件vue文件 2.引入组件 3.注册组件 4.应用组件总结前言本文章,只是初步了解 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
如何在文档中显示藏文_信息检索系统中藏文自动提示的研究与实现.doc
信息检索系统中藏文自动提示的研究与实现.doc 还剩 7页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内容要点: [3] 才智杰,才让卓玛.基于语料库的藏文字属 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体 ...

vue+ts中引入组件自动提示 declare module

vue+ts中引入组件自动提示 declare module相关推荐

最新文章

热门文章