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虚拟…

学习thinkphp的循环标签

1.FOREACH标签 foreach标签的用法和PHP语法非常接近&#xff0c;用于循环输出数组或者对象的属性&#xff0c;用法如下&#xff1a; $list User::all(); View::assign(list,$list); 模板文件中可以这样输出 {foreach $list as $key>$vo } {$vo.id}:{$vo.name} {/foreac…

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}}…

Java 说唱歌手

Yo yo yo&#xff0c;欢迎来到Java地带&#xff0c;技术的盛宴开启&#xff0c; 从JDK到JVM&#xff0c;我们构建的是数字世界的奇迹。 Spring Boot启动&#xff0c;微服务架构轻盈起舞&#xff0c; IoC解耦依赖&#xff0c;AOP切面如丝般顺滑。 Maven管理依赖&#xff0c;Gra…

CS144 Lab Checkpoint 5: down the stack (the network interface)

网络层 (NetworkLayer) 发送数据报 (send_datagram)&#xff1a;应用层调用 send_datagram 方法&#xff0c;传递需要发送的IP数据包和下一跳的IP地址。IP数据报&#xff1a;将数据报封装成一个IP数据包。查找ARP缓存&#xff1a;检查ARP缓存中是否有目标IP地址的MAC地址。找到…

timm笔记

快速开始 安装 timm pip install timmtimm.create_model (model_name: str,pretrained: bool False,pretrained_cfg:Union None,pretrained_cfg_overlay: Optional None,checkpoint_path: str ,scriptable: Optional None,exportable: Optional None,no_jit: Optiona…

SpringMVC流程

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

B站滑块登录之极验点选

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

Golang:使用wellington/go-libsass对CSS进行预处理

wellington/go-libsass是一个用于预处理CSS文件的库&#xff0c;采用 Go封装&#xff0c;100% 与 Sass 兼容的 libsass 项目 不过需要依赖libsass&#xff0c;现在已经过时了&#xff0c;可以考虑使用dart-sass 文档 https://github.com/wellington/go-libsass 安装 go ge…

淘宝搬家到另一个店铺可以吗?店铺搬家了影响退款吗?

在淘宝平台上&#xff0c;商家可能会因为各种原因需要将店铺迁移到另一个店铺。那么&#xff0c;淘宝搬家到另一个店铺是否可行&#xff0c;搬家对退款又会产生什么影响呢&#xff1f;接下来详细解答这些问题。 一、淘宝搬家到另一个店铺可以吗 可以 1、 淘宝搬家流程&#…