技术栈

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语言结构体
相关推荐
Heo
2 分钟前
简单聊聊webpack摇树的原理
前端·javascript·面试
San30
3 分钟前
深入理解 JavaScript 异步编程:从 Ajax 到 Promise
javascript·ajax·promise
少卿
6 分钟前
React 日历组件完全指南:从网格生成到农历转换
前端·react.js
程序员鱼皮
22 分钟前
Gemini 3.0 发布!
前端·ai编程·gemini
程序员鱼皮
24 分钟前
Gemini 3.0 炸裂发布!前端又死了???
前端·ai·程序员·互联网·代码
xiangxiongfly915
26 分钟前
CSS svg
前端·css·svg
山依尽
37 分钟前
如何将一个 React SPA 项目迁移到 Next.js 服务端渲染
前端·next.js
桜
41 分钟前
使用 svgfmt 优化 SVG 图标
前端·svg·icon
Watermelo617
42 分钟前
href 和 src 有什么区别,它们对性能有什么影响?
前端·javascript·vue.js·性能优化·html·html5·用户体验
hqk
1 小时前
鸿蒙零基础语法入门:开启你的开发之旅
android·前端·harmonyos
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法!免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05Google Antigravity:无法登录?早期错误、登录修复和用户反馈指南06Linux下V2Ray安装配置指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)08Spring Boot 4.0 发布总结:新特性、依赖变更与升级指南09全球最强模型Grok4,国内已可免费使用!(附教程)1046个Nano-banana 精选提示词,持续更新中