vue3+ts 动态导入多文件组件

 1、在components文件夹中新建index.ts文件(components文件夹下为创建的组件)

// index.ts
const modules = import.meta.globEager("./*.vue");  //参数为组件路径
let componentsOpts = {}const getCaption = (obj, str, z: boolean) => {let index = obj.lastIndexOf(str);if (z) index += str.length// z为true则截取/之后的内容,反之obj = z ? obj.substring(index, obj.length) : obj.substring(0, index);return obj;
};for (let path in modules) {let str = getCaption(path, './', true)str = getCaption(str, '.vue', false)componentsOpts[str] = modules[path]['default']
}export default componentsOpts

2、在vue文件中引入组件

// list.vue
<script setup lang='ts'>
import componentObj from './components'// const 组件名称 = componentObj['组件文件名称']
const ContentMain = componentObj['main']</script><template><div><content-main ></content-main></div>
</template><style scoped lang='scss'></style>

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

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

相关文章

php获取随机不重复数字(封装函数直接拿来用)

在PHP中获取随机值这种操作非常常见&#xff0c;比如订单号&#xff0c;密码加密&#xff0c;以及验证码等&#xff0c;那么在本文介绍一种获取随机不重复数字的函数。 主要核心就是生成随机数函数&#xff1a;mt_rand() 由于这里获取的是不重复的随机数&#xff0c;所以需要…

亚马逊公告:订单存档政策调整,超过两年将于9月起存档

站斧浏览器获悉&#xff1a; 亚马逊新公告&#xff1a;2023年9月起&#xff0c;亚马逊美国站和欧洲站宣布将调整订单数据存档政策。这一政策的调整旨在保护客户的个人隐私和数据安全&#xff0c;从而提高客户的购物体验。据悉&#xff0c;所有历时超过两年以上的订单将按月进行…

【高频面试题】多线程篇

文章目录 一、线程的基础知识1.线程与进程的区别2.并行和并发有什么区别&#xff1f;3.创建线程的方式有哪些&#xff1f;3.1.Runnable 和 Callable 有什么区别&#xff1f;3.2.run()和 start()有什么区别&#xff1f; 4.线程包括哪些状态&#xff0c;状态之间是如何变化的4.1.…

如何将Linux上的cpolar内网穿透设置成 - > 开机自启动

如何将Linux上的cpolar内网穿透设置成 - > 开机自启动 文章目录 如何将Linux上的cpolar内网穿透设置成 - > 开机自启动前言一、进入命令行模式二、输入token码三、输入内网穿透命令 前言 我们将cpolar安装到了Ubuntu系统上&#xff0c;并通过web-UI界面对cpolar的功能有…

如何维护自己的电脑

目录 1、关于电脑选择的建议 1.1、价格预算 1.2、明确需求 1.3、电脑配置 1.4、分辨率 1.5、续航能力 1.6、品牌选择 1.7、用户评测 1.8、各个电商平台对比 1.9、最后决策 2、我的选择 3、电脑保养 3.1 外部清洁 3.2 安装软件 3.3 优化操作系统 3.4 维护硬件设…

web前端之CSS

文章目录 一、CSS简介1.1 CSS语法规则 二、CSS的引用方法2.1 定义行内样式表2.2定义内部样式表2.3链入外部样式表2.4导入外部样式表 三、CSS选择符3.1 基本选择符3.1.1 标签选择符3.1.2 class类选择符3.1.3 id选择符 3.2 复合选择符3.2.1 交集选择符&#xff08;合并选择器&…

Docker安装Hadoop分布式集群

一、准备环境 docker search hadoop docker pull sequenceiq/hadoop-docker docker images二、Hadoop集群搭建 1. 运行hadoop102容器 docker run --name hadoop102 -d -h hadoop102 -p 9870:9870 -p 19888:19888 -v /opt/data/hadoop:/opt/data/hadoop sequenceiq/hadoop-do…

将matlab中工作区的数据保存为.mat文件及加载.mat数据

将matlab工作区中的数据保存为.mat文件 如数据a a[1 1 2 3 2 4];一、工作区数据 二、保存为.mat文件 利用save保存数据a到data.mat文件中 save(data.mat,a);三、加载数据 Iload(data.mat)

SEO搜索引擎优化

目录 场景 内部业务To B (Business-to-Business&#xff0c;B2B)需要降低SEO&#xff0c;反爬 客户业务To C (Business-to-Consumer&#xff0c;B2C)需要提高SEO TDK优化 Title&#xff08;标题&#xff09; Description&#xff08;描述&#xff09; Keywords&#xff…

matplotlib fig.legend()常用参数 包括位置调整和字体设置等

一、四种方法 legend() legend(handles, labels) legend(handleshandles) legend(labels)1 legend() labels自动通过绘图获取&#xff08;Automatic detection of elements to be shown in the legend&#xff09; # 第一种方法 ax.plot([1, 2, 3], labelInline label) ax.l…

Redis过期键删除策略

如果一个键过期了&#xff0c;那么它什么时候会被删除呢? 这个问题有三种可能的答案&#xff0c;它们分别代表了三种不同的删除策略&#xff1a; 1.定时删除&#xff1a;在设置键的过期时间的同时&#xff0c;创建一个定时器(timer)&#xff0c;让定时器在键的过期时间来临时…

Samba在Windows 11的网上邻居中不能显示

Centos 7 上的Samba服务器搭建好。在以前的Centos6上搭建的Samba一直都能正常显示在Windows 7、10、11的网络邻居中的&#xff0c;并且安卓设备的网络邻居也都可以显示出Samba&#xff0c;而现在只有Windows 7、10以及安卓设备能在网络邻居里显示Samba共享。甚至今天在完成所有…

java.sql.Date java.util.Date

文章目录 两者关系两者在时间显示上区别 两者关系 sql包中Date是util包子类 public class Date extends java.util.Date 两者在时间显示上区别 /*** 解决sql包中日期和util包日期转换问题*/Testpublic void t3(){Date utilDate new Date();java.sql.Date sqlDate new java.…

4.3 移动终端安全

数据参考&#xff1a;CISP官方 目录 移动智能终端重要性移动智能终端安全威胁移动智能终端安全使用 一、移动智能终端重要性 1、移动智能终端的发展 完整的超小型计算机系统 强大的处理能力完整的软硬件系统 可完成较为复杂的处理任务 拍照、听音乐、玩游戏、上网、视…

免费ai写作生成器帮你释放创作天赋

喂&#xff01;听说你想提升写作功力&#xff1f;那么恭喜你&#xff0c;现在流行的ai写作软件将成为你提升写作效率的秘密武器。这是一款革命性的应用&#xff0c;就像你的个人写作导师&#xff0c;会帮助你通过简单的几步&#xff0c;创造出令人瞠目结舌的文字作品&#xff0…

阿里云国际站视频直播服务是什么呢?

阿里云国际站视频直播是什么呢&#xff1f;下面一起来看一下&#xff1a; 视频直播服务&#xff08;ApsaraVideo Live&#xff09;是基于前瞻的内容接入、分发网络和大规模分布式实时转码技术打造的音视频直播平台&#xff0c;提供便捷接入、高清流畅、超低延时、高并发的音视频…

redis NOAUTH Authentication required 可能不是密码问题

开发环境 springboot 2.4.3 spring-boot-starter-data-redis 2.4.3 redis 4.0 lettuce 6.0.2 背景 多环境&#xff08;test&#xff0c;pre&#xff0c;prd&#xff09;部署&#xff0c;在测试环境测试通过之后部署预发环境的时候&#xff0c;服务一直报错&#xff0c;提示【i…

动态规划题目

真的学不会dp啊啊啊啊嗷嗷嗷嗷嗷彻底疯狂彻底疯狂&#xff0c;只能祈祷量变引起质变 哭 1. cf E. Fixed Points 主要是不会设状态嘛 第一维枚举i个数&#xff0c;第二维枚举删了几个数(删到最后还剩几个数) dp[i][j] : 代表i个数删到仅剩j个数后的最大匹配个数。然后考虑第…

arcgis更改图层字段名脚本

话不多说&#xff0c;上脚本源码&#xff0c;复制黏贴即可 #-*- coding:utf-8 -*- __author__ lumen import arcpy #输入图层 InputFeature arcpy.GetParameterAsText(0) #原始字段 oldField arcpy.GetParameterAsText(1) # 获取原始字段类型 oldFieldType desc arcpy.…

python人工智能可以干什么,python人工智能能干什么

大家好&#xff0c;给大家分享一下python做人工智能需要什么水平&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 人工智能包含常用机器学习和深度学习两个很重要的模块&#xff0c;而python拥有matplotlib、Numpy、sklearn、keras等大量的…