技术栈

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语言结构体
相关推荐
用户29869853014
6 分钟前
在 React 中使用 JavaScript 合并 Excel 文件
前端·javascript·react.js
大流星
9 分钟前
LangChainJs之基础模型(一)
javascript·langchain
橘子星
11 分钟前
JavaScript this 指向全解实战指南
前端·javascript
何出无名之师
12 分钟前
AIDL的一次调用链路追踪之二,如何和驱动打交道
前端
weedsfly
13 分钟前
JS垃圾回收:从原理到项目实战,彻底根治内存泄漏
前端·javascript·面试
Jcc
16 分钟前
虚拟 DOM 是什么?从 Snabbdom 理解 Vue 的 DOM 更新机制
前端
user6222986492581
16 分钟前
Vue 常用技术知识全景:从响应式到组件通信的系统理解
前端
feiyu_gao
17 分钟前
一个人 + AI:246 commits 做出设计系统 CLI 的故事
前端·ai编程·交互设计
奶油mm
21 分钟前
从 0 到 1 搭建高可用 Redis Cluster:踩坑、优化与生产实践
前端
热门推荐
012026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结042026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?052026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?06Claude Code、Codex、Cursor三分天下:2026年AI编程Agent生态全景剖析072026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?082026 年 AI 大模型 & AI 编程工具实战全总结09Trae国际版与国内版深度测评:AI原生IDE的双生花10飞书长连接_事件订阅(接收消息,审批任务状态变更)