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))
}
相关推荐
2601_949809593 分钟前
flutter_for_openharmony家庭相册app实战+隐私设置实现
android·javascript·flutter
2601_949593654 分钟前
React Native 鸿蒙跨平台开发:LinearGradient 渐变动画效果
javascript·react native·react.js
黄筱筱筱筱筱筱筱6 分钟前
7.适合新手小白学习Python的异常处理(Exception)
java·前端·数据库·python
qq_177767376 分钟前
React Native鸿蒙跨平台音乐播放器涉及实时进度更新、播放控制、列表交互、状态管理等核心技术点
javascript·react native·react.js·ecmascript·交互·harmonyos
QQ17958063967 分钟前
基于springboot+vue的hive的歌曲音乐筛选推荐系统网站(源码+lw+部署文档+讲解等)
vue.js·hive·spring boot
2501_9209317010 分钟前
React Native鸿蒙跨平台实现了简单的商品图片轮播功能,为用户提供了直观的商品图片浏览体验,帮助用户全面了解商品外观
javascript·react native·react.js·ecmascript·harmonyos
Yeats_Liao12 分钟前
微调决策树:何时使用Prompt Engineering,何时选择Fine-tuning?
前端·人工智能·深度学习·算法·决策树·机器学习·prompt
晚霞的不甘13 分钟前
Flutter for OpenHarmony 实现 iOS 风格科学计算器:从 UI 到表达式求值的完整解析
前端·flutter·ui·ios·前端框架·交互
陈希瑞16 分钟前
OpenClaw Chrome扩展使用教程 - 浏览器中继控制
前端·chrome
m0_7482331720 分钟前
Laravel+Vue:全栈开发终极指南
vue.js·php·laravel