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))
}
相关推荐
paopaokaka_luck8 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风9 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Mike_jia9 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind9 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树9 小时前
Vue3优化指南:少写代码,多提性能
vue.js
HuangYongbiao10 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo10 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽10 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791810 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔10 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js