技术栈

vue3 动态加载组件

爱咋咋地12024-08-02 1:37
javascript 复制代码
//模版调用
<component :is="geticon(item.icon)" />

//引入
import { ref, onMounted, markRaw, defineAsyncComponent } from 'vue';


//异步添加icon图标组建
function geticon(params) {
    const modules = import.meta.glob('../components/icons/*.vue');
    const link = modules[`../components/icons/${params}.vue`]
    return markRaw(defineAsyncComponent(link))
}
上一篇:若依替换首页上的logo
下一篇:深入理解C语言结构体
相关推荐
Aric_Jones
20 小时前
JavaScript 从入门到精通:完整语法指南
开发语言·javascript·ecmascript
岱宗夫up
20 小时前
FastAPI入门(上篇):快速构建高性能Python Web API
开发语言·前端·python·fastapi
紫陌涵光
20 小时前
112. 路径总和
java·前端·算法
漠月瑾-西安
20 小时前
CVE-2025-55182漏洞解析:你的React项目安全吗?
前端·安全·react.js
No丶slovenly
21 小时前
flutter笔记-输入框
前端·笔记·flutter
国产化创客
21 小时前
ESP32+Web实现智能气象站
前端·物联网·智能家居·智能硬件
coderYYY
1 天前
VSCode终端启动报错
前端·ide·vscode·npm·编辑器
西门吹-禅
1 天前
文本搜索node js--meilisearch
开发语言·javascript·ecmascript
tod113
1 天前
Redis 数据类型与 C++ 客户端实践指南(redis-plus-plus)
前端·c++·redis·bootstrap·html
Sylvia33.
1 天前
火星数据:棒球数据API
java·前端·人工智能
热门推荐
01从零搭建一个 PHP 登录注册系统(含完整源码)02使用 1panel面板 部署 php网站03PHP Error: 常见错误及其解决方法04openClaw安装飞书插件|核心踩坑:spawn EINVAL 错误终极解决指南05GitHub 镜像站点06Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services07Android Studio Panda 1 正式版来了:JDK 终于不用手动配了,内存泄漏也有原生方案了08配置 OpenClaw 使用 Ollama 本地模型09UV安装并设置国内源10MIUI显示/隐藏5G开关的方法,信号弱时开启手机Wifi通话方法