vue3 vite动态根据字符串加载组件

1 原理

import.meta.glob() 其实不仅能接收一个字符串,还可以接收一个字符串数组,就是匹配多个位置
let RouterModules = import.meta.glob(["/src/view/*/*.vue", "/src/view/*.vue"]);

这样我们就拿到了相对路劲的组件对象,通过@/views/ 绝对路径匹配不行,只能相对路径;
在这里插入图片描述

2 调用样例

1)这样我 通过 字符串拿到组件方法,然后 await 组件方法() 加载组件
2)也可以等待 nextTick() 后,再执行组件内的方法

<template><button @click="openAudit('agency/project/projectAudit.vue')">审批</v-btn>			<!-- 审批表单组件 --><component ref="auditRef" :is="auditComponent" v-if="auditComponent"></component>
</template><script setup>// 动态审批组件const auditRef = ref()// 动态审批组件引用const auditComponent = ref(null)//通过glob 将制定 制定路径加载至 map对象,key为路径,value 组件的加载方法,需执行后才能加载const viteComponents = import.meta.glob('../../**/*.vue')//打开相应的审批表单const openAudit = async (vuePath) => {const componentPath = `../../${vuePath}`try {const module = await viteComponents[componentPath]()auditComponent.value = module.default || moduleawait nextTick()// 调用组件的 open 方法auditRef.value.open()} catch (error) {console.error(`Failed to load component ${componentPath}:`, error)auditComponent.value = null // Or handle the error appropriately}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[激光原理与应用-93]:激光焊接检测传感器中常用的聚焦镜、分色镜、分光镜、滤波镜

目录 一、聚焦镜 1.1 原理及作用 1.2 性能指标 1.3 应用 1.4 类型 二、分色镜 2.1 原理及应用 2.2 种类 2.3 特点 2.4 注意事项 2.5 性能指标 三、分光镜 ​编辑 3.1 分光镜的类型 3.2 分光镜的工作原理 3.3 分光镜的应用 3.4 分光镜的参数 3.5 分光镜的优点…

物业可视化大屏,终于让繁琐数据一手掌握啦。

物业可视化大屏通常需要展示与物业管理相关的数据&#xff0c;以便管理人员和业主能够实时监控和分析物业运营情况。以下是一些常见的物业可视化大屏所展示的数据类别&#xff1a; 1. 房产信息&#xff1a; - 房产总数、出租率、空置率等。- 房产面积分布情况。- 房产类型、户…

ES升级--01--环境准备和安装

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Linux 单机1.官网下载 Elasticsearchhttps://www.elastic.co/cn/downloads/past-releases/#elasticsearch 2.解压软件3.创建用户设置用户 es 密码 es赋权ES用户数据…

MySQL——约束与表的设计基础

前言 本篇文章主要介绍数据库约束以及数据库中有关表设计的一些基础知识&#xff0c;文章会尽量都用实例进行直观的讲解与展示每个知识点的意义&#xff0c;现在就开始今天的学习吧&#xff01;&#xff01; 一、数据库约束 1.约束概述 约束&#xff0c;就是在创建表的时候给…

Spring Boot 01:Spring Boot 项目的两种创建方式

一、前言 记录时间 [2024-05-25] 本文讲述 Spring Boot 项目的两种创建方式&#xff0c;分别是 IDEA 和官网。 由 Spring 官网知&#xff0c;当前 Spring Boot 的最新版本为 3.3.0&#xff0c;需要最低 JDK 版本为 17。 Spring 官网项目创建地址JDK 17 版本下载地址 准备工作…

软考-下午题-试题二、三

主要是最后一问的不同解答 1、父图子图平衡 1、员工关系是否存在传递依赖&#xff1f;用100字以内的文字说明理由。2019 2、在职员关系模式中&#xff0c;假设每个职员有多名家属成员&#xff0c;那么职员关系模式存在什么问题&#xff1f; 应如何解决&#xff1f;2020 职员关系…

二十八篇:嵌入式系统实战指南:案例研究与未来挑战

嵌入式系统实战指南&#xff1a;案例研究与未来挑战 1. 引言 1.1 嵌入式系统的重要性及其应用广度 在当今快速发展的技术领域中&#xff0c;嵌入式系统扮演着至关重要的角色。这些系统是专门设计的计算机硬件和软件的组合&#xff0c;旨在执行特定任务&#xff0c;如控制、监…

青鸟云报修系统:实现高效、便捷的维修申请处理

在日常生活和工作中&#xff0c;故障报修难免会遇到&#xff0c;售后报修服务则成为了解决问题的关键。纸质化售后报修维修申请单&#xff0c;作为报修流程中的重要一环&#xff0c;在一定程度上能够记录和追踪售后报修维修流程&#xff0c;但在实际操作过程中却存在着诸多弊端…

速看!!!24上软考-信息系统项目管理师真题回忆,考点已更新

整理了24上半年软考高级信息系统项目管理师的考试真题&#xff0c;软考一个批次一套题&#xff0c;现在都是机考&#xff0c;收集题目比较困难&#xff0c;希望能给个小小的赞支持一下。 注意&#xff1a;当天考试的宝子们可以对答案预估分数&#xff01;后面场次的宝子可以提…

llama-factory学习个人记录

框架、模型、数据集准备 1.llama-factory部署 # 克隆仓库 git clone https://github.com/hiyouga/LLaMA-Factory.git # 创建虚拟环境 conda create --name llama_factory python3.10 # 激活虚拟环境 conda activate llama_factory # 安装依赖 cd LLaMA-Factory pip install -…

Java虚拟机揭秘-底层驱动力,性能保障!

Java虚拟机作为Java技术体系的核心组成部分&#xff0c;其重要性不言而喻。它不仅为Java提供了跨平台的能力&#xff0c;更是Java程序运行的基石。本文将为您深入解析Java虚拟机的工作原理、作用和应用场景&#xff0c;并通过生动的实例让您彻底理解这一关键技术。 一、Java虚拟…

element-plusDate Picker 日期选择器获取年月日

代码逻辑 对选择日期选择后进行搜索 &#xff1a; function dataValue(value) {console.log(value);scenic_list.value arrlist.value.filter(function (item) {// 判断是否满足搜索条件if (String(item.create_time).indexOf(String(value)) > -1) {return scenic_list}}…

SpringMVC流程

1、SpringMVC常用组件&#xff1a; DispatcherServlet&#xff08;请求分发器&#xff09;&#xff1a;Spring MVC的核心组件之一&#xff0c;负责处理全局配置和将用户请求分发给其他组件进行处理。Controller&#xff08;处理器&#xff09;&#xff1a; 实际处理业务逻辑的…

B站滑块登录之极验点选

滑块登录这些东西都不是很难&#xff0c;我个人的去处理的话一般会考虑三种方案&#xff0c;一个是自动化selenium 二是各类打码平台 三是ocr识别&#xff0c;本文是selenium接打码平台&#xff0c;也是个比较常规的操作。 先常规步骤跟着来吧&#xff0c;做登录的话把基本的模…

Tower在深度学习中的概念,tower没有确切定义

在论文UniTS中&#xff0c;来自Havard的工作。 tower更像是针对一个task的组件 tower这个概念貌似在REC&#xff08;recommendation&#xff09;推荐系统中使用较多 deep learning - What is a tower? - Data Science Stack Exchange https://developers.google.com/machin…

技术前沿 |【VL-BEIT:引领未来的极简单阶段多模态预训练方案】

VL-BEIT&#xff1a;引领未来的极简单阶段多模态预训练方案 引言一、VL-BEIT的基本介绍二、VL-BEIT的原理和工作方式三、VL-BEIT的特点四、VL-BEIT的应用场景五、总结与展望 引言 在人工智能蓬勃发展的今天&#xff0c;多模态预训练模型正逐渐成为研究和应用的热点。这些模型能…

二叉树OJ题目

一.二叉树第k层结点个数 有这样的一个思路&#xff1a;我既然要求第k层的结点个数&#xff0c;我肯定是要用到递归&#xff0c;那么当我在递归到第k层的时候我就开始判断&#xff0c;这一层是不是我所需要的那一层&#xff0c;如果是&#xff0c;就计数有几个节点&#xff0c;…

边框渐变样式

实现样式&#xff1a; 对应代码&#xff1a; div {min-height: 40vh;border: 10px solid transparent;background-image: linear-gradient(#222, #222), var(--gradient);background-origin: border-box;background-clip: padding-box, border-box;border-radius: 10px;positi…

粉丝问,有没有UI的统计页面,安排!

移动应用的数据统计页面具有以下几个重要作用&#xff1a; 监控业务指标&#xff1a;数据统计页面可以帮助用户监控关键业务指标和数据&#xff0c;例如用户活跃度、销售额、转化率等。通过实时更新和可视化呈现数据&#xff0c;用户可以及时了解业务的整体状况和趋势。分析用…

每日练习之字符串——得分

得分 题目描述 运行代码 #include <iostream> using namespace std; int main(){int n;cin>>n;while(n--){string s;cin>>s;int ls.length();int a0;int t1;for(int i0;i<l;i){if(s[i]O){at;t;}else if(s[i]X){t1;}}cout<<a<<endl;} } 代码…