(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践

实践方案

  • 问题原因:Vue3并没有对自定义全局组件做TS类型支持处理,而是把这个功能转交Volar实现
  • 实现原理:利用TypeScript模块扩充技术,对全局组件的类型进行扩充,从而实现对新注册全局组件的类型保护
  • 实现步骤:①声明一个的*d.ts类型文件 ②对类型接口进行类型模块扩充并导出

参考Volar文档 定义全局组件:使用GlobalComponents类型接口声明类型

// components.d.ts
import Button from './Button/index.vue';
declare module '@vue/runtime-core' {export interface GlobalComponents {// 组件名: Button组件数据DemoButton: typeof Button;}
}
export {};

简评:Volar官方全局组件的推荐写法,基于Volar,必须安装该插件,GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口

原文地址:https://juejin.cn/post/7066730414626308103

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/12179.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中switch枚举类型enum的用法

目录 一、Java 中 switch 语句和枚举类型的使用 1. 定义枚举类型 2. 使用枚举类型 3. 类型安全和易读性 4. 扩展性和可维护性 总结 数组 : java中的数组是用来存储多个相同类型数据的数据机构;下标从0开始 根据下标查询:数组名[下标] 集…

Vue3组件库开发项目实战——02项目搭建(配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest)

摘要:在现代前端开发中,构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时,我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境,以下是配置代码规范、格式化、CSS样…

335_C++_传入自定义数量参数,通过位移,生成唯一标识符key,通过函数返回值,看是占据32位还是64位

quint32 makeKey(int w, int h, quint8 quality, bool equalRatio) : 用于生成一个唯一的键(key) static inline quint32 makeKey(int w, int h, quint8 quality, bool equalRatio){return (w << 20)

通配符正则表达式(RegEXP)

通配符 Linux中通配符是一种特殊字符&#xff0c;用于匹配一组文件名中的某些部分。通配符可以用于文件名的前缀、后缀、中间的一部分等。Linux中常见的通配符包括星号&#xff08;*&#xff09;、问号&#xff08;?&#xff09;和方括号&#xff08;[]&#xff09;&#xff0…

扩散模型diffusion model

一 什么是扩散模型 1.1 现有生成模型 已经有大量的方法证明深度生成模型能够模拟人类的想象思维&#xff0c;生成人类难以分辨真伪的内容&#xff0c;主要方法如下&#xff1a; 1、GAN&#xff1a;用神经网络训练生成器和判别器 GAN 的主要思想&#xff1a; GAN 就是一个互搏的…

49.乐理基础-拍号的类型-单拍子、复拍子

当前写的东西&#xff0c;如果只是想要看懂乐谱的话&#xff0c;它是没什么意义的&#xff0c;就像我们要把 0&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5。。。称为自然数&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5称为正整…

H5 云商城 file.php 文件上传致RCE漏洞复现

0x01 产品简介 H5 云商城是一个基于 H5 技术的电子商务平台,旨在为用户提供方便快捷的在线购物体验。多平台适配:H5 云商城采用 H5 技术开发,具有良好的跨平台适配性。无论是在电脑、手机还是平板等设备上,用户都可以通过网页浏览器访问和使用云商城,无需安装额外的应用程…

销量?模糊销量?精准销量?如何获取淘宝商品销量数据接口

淘宝爬虫商品销量数据采集通常涉及以下几个步骤&#xff1a; 1、确定采集目标&#xff1a;需要明确要采集的商品类别、筛选条件&#xff08;如天猫、价格区间&#xff09;、销量和金额等数据。例如&#xff0c;如果您想了解“小鱼零食”的销量和金额&#xff0c;您需要设定好价…

vueday1

1.作用&#xff1a;利用表达式进行插值&#xff0c;渲染到页面中 三元表达式、点语法、数组对应项&#xff0c;方法、点语法方法 1.使用的时候需要存在&#xff0c;需要在data里面声明&#xff0c;如果没有声明会报错 2.ifelse不能用 3.不能在标签属性中使用{{}}插值 <!DO…

【前端】打砖块游戏:实现细节介绍

打砖块游戏:实现细节介绍 在本文中,我将详细介绍如何使用HTML、CSS和JavaScript技术构建一个简单的打砖块游戏。我们将重点讨论游戏的三个核心技术方面:碰撞检测、画图和事件监听。 完整代码我放在:github可以直接拉取代码测试。 游戏概览 打砖块游戏中,玩家通过控制底…

静态住宅IP优缺点总结

在进行海外 IP 代理时&#xff0c;了解动态住宅 IP 和静态住宅 IP 的区别以及如何选择合适的类型非常重要。本文将介绍精态住宅 IP 特点和&#xff0c;并提供选择建议&#xff0c;帮助您根据需求做出明智的决策。 静态住宅 IP 的特点 静态住宅 IP 是指 IP 地址在一段时间内保…

深入解析Apache Flink核心概念:事件流、状态、事件时间和快照

Apache Flink树立了流处理领域的标杆&#xff0c;其核心支柱——事件流、状态管理、事件时间处理&#xff0c;以及快照机制&#xff0c;共同构成了一个强大而灵活的框架&#xff0c;专为应对大数据的实时和历史分析挑战而设计。以下是关于 Apache Flink 四个核心概念的详细介绍…

涨点神器:即插即用特征融合模块!超低参数,性能依旧SOTA

在写论文时&#xff0c;一些通用性模块可以在不同的网络结构中重复使用&#xff0c;这简化了模型设计的过程&#xff0c;帮助我们加快了实验的迭代速度。 比如在视觉任务中&#xff0c;即插即用的特征融合模块可以无缝集成到现有网络中&#xff0c;以灵活、简单的方式提升神经…

7.STL中string的一些超常用函数 (附习题)

目录 1.find 2.atoi 3.to_string 4.getline 【leetcode 习题】 387.字符串中的第一个唯一字符 125. 验证回文串 1.find 1.查找第一次出现的目标字符串&#xff1a;说明&#xff1a;如果查找成功则输出查找到的第一个位置&#xff0c;否则返回-1&#xff1b; s1.find(s2…

宇宙(科普)

宇宙&#xff08;Universe&#xff09;在物理意义上被定义为所有的空间和时间&#xff08;统称为时空&#xff09;及其内涵&#xff0c;包括各种形式的所有能量&#xff0c;比如电磁辐射、普通物质、暗物质、暗能量等&#xff0c;其中普通物质包括行星、卫星、恒星、星系、星系…

【目标检测】YOLOv5|YOLOv8模型QT界面可视化部署

YOLO-Deploy-QT_Interface 最近笔者做了YOLO系列算法的部署工作,现做一个总结。主要工作是做了用于部署YOLOv5和YOLOv8的可视化QT界面,可实现图片、文件夹、视频、摄像头的ONNX与OpenVino部署,具体效果如下: 代码链接:https://github.com/Zency-Sun/YOLO-Deploy-QT_Inte…

Centos7 配置 DNS服务器

Centos 7 配置DNS服务器 环境描述&#xff1a; 一台服务器和一台用于测试的客户机 服务器IP&#xff1a;192.168.200.132 客户机IP&#xff1a;192.168.200.143 服务器配置 yum install bind bind-utils -y #安装软件包vim /etc/named.conf //编辑named主配置文件listen-on p…

【Linux】解析键盘组合键产生信号的完整过程:从硬件中断到信号发送

前言 每一个了解Linux的都知道这样一个知识&#xff0c;CtrlC组合键能够终止一个进程。 个人了解进程相关知识之后知道&#xff0c;一个进程被终止只会有有三种情况&#xff1a; 代码运行完毕&#xff0c;结果正确代码运行完毕&#xff0c;结果不正确代码运行异常&#xff…

huggingface 笔记:pipeline

1 介绍 pipeline() 是使用预训练模型进行推理的最简单和最快速的方式。可以针对不同模态的许多任务直接使用 pipeline() 2 举例&#xff1a;情感分析 2.1 创建pipeline实例 from transformers import pipelineclassifier pipeline("sentiment-analysis") #首先创…

SystemC学习使用记录

一、概述 对于复杂的片上系统&#xff0c;在进行RTL编码前&#xff0c;需进行深入的系统级仿真&#xff0c;以确认设计的体系结构是否恰当、总线是否能满足吞吐量和实现性要求以及存储器是否浪费&#xff0c;所进行的这些仿真要求在芯片的仿真模型上运行大量的软件&#xff0c…