vue3 动态加载组件

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))
}
相关推荐
ji_shuke2 分钟前
Vue 3 使用 History 哨兵和 popstate 拦截浏览器返回
前端·javascript·vue.js·history·哨兵·popstate
名字还没想好☜38 分钟前
Prometheus 告警实战:写 alerting rules、用 Alertmanager 做路由分组与抑制
运维·前端·javascript·docker·kubernetes·prometheus
郭邯1 小时前
从零撸了一个 HTML 实体编解码工具,顺便聊聊我和 AI 结对编程的日常
前端
樊小肆1 小时前
DeepSeeker-Code源码导读12-Hooks四引擎
前端·人工智能·agent
xiaohe06011 小时前
🤔 v-mortal 是什么?!我只知道 v-model 啊!
vue.js·vite·前端工程化
xm_xm_xm_11 小时前
TypeScript 7 个 核心特性
前端·typescript
mONESY1 小时前
手把手从零复刻「英文网页 AI 翻译」Chrome 插件(新手向)
javascript
pppiii1 小时前
前端并发请求控制:5 种实现方案完整梳理
前端
郑州光合科技余经理1 小时前
本地生活平台搭建:统一订单表与多后台切换怎么拆
java·开发语言·前端·系统架构·uni-app·php·ai编程
iFlyCai2 小时前
深入理解Flutter:StatefulWidget生命周期全解析(四)
前端·javascript·flutter