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))
}
相关推荐
iDao技术魔方2 分钟前
Bun v1.3.12 深度解析:新特性、性能优化与实战指南
开发语言·javascript·visual studio code
小兵阿飞4 分钟前
Vite 技术介绍:实现原理、应用与优化
前端·vite
码喽7号15 分钟前
vue学习六:状态管理VueX
javascript·vue.js·学习
jiayong2315 分钟前
第 13 课:分页、页码状态和 URL 同步
开发语言·前端·javascript·vue.js·学习
阿正的梦工坊25 分钟前
JavaScript 闭包 × C++ 类比:彻底搞懂闭包
开发语言·javascript·c++
smilejingwei42 分钟前
用 AI 编程生成 ECharts 图表并嵌入报表的实践
前端·人工智能·echarts·bi·报表工具·商业智能
丷丩43 分钟前
第3篇:技术拆解|3dtubetilecreater 前后端架构全解析(Vue+Express+PostGIS)
vue.js·3d·架构
Linux运维技术栈1 小时前
Cloudflare Argo Smart Routing全球加速:优化跨境回源链路,提升跨区域访问体验
大数据·前端·数据库
恋猫de小郭2 小时前
Android CLI ,谷歌为 Android 开发者专研的 AI Agent,提速三倍
android·前端·flutter
Hello--_--World2 小时前
Js 隐式类型转换、JavaScript `==` vs `===` 深度对比表
开发语言·javascript·ecmascript