首页 > 其他分享 >vue3动态加载组件

vue3动态加载组件

时间:2024-03-29 17:44:41浏览次数:17  
标签:Vue const meta 模块 vue3 组件 import 加载

Vue 2项目中使用require.context()来动态地加载模块。

但是Vue 3项目默认使用ES模块,而不是CommonJS模块。因此,你不能直接使用require()来加载模块。

在Vue 3项目中,你可以使用import.meta.glob()或import.meta.globEager()来实现类似的功能。

以下是一个例子,如何使用import.meta.glob()来动态加载Vue组件:

const modules = import.meta.glob('/src/components/*.vue');
 
// 使用时,你可以基于模块名(文件路径)来导入模块
const MyComponent = modules['./src/components/MyComponent.vue'].default;
 这段代码会创建一个对象,该对象的键是模块的路径,值是一个Promise,它会解析为模块的导出。

注意,import.meta.glob()和import.meta.globEager()返回的是一个对象,其中包含了模块的路径作为键,并且对应的值是一个Promise。你需要等待这个Promise解析后才能访问到模块的导出。

如果你想要在创建应用时就加载所有模块,可以使用import.meta.globEager()。

const modules = import.meta.globEager('/src/components/*.vue');
 
// 使用时,直接通过模块名(文件路径)来访问模块
const MyComponent = modules['./src/components/MyComponent.vue'].default;
 这段代码会同步地返回一个对象,该对象的键是模块的路径,值是模块的导出。

这些方法可以帮助你在Vue 3项目中动态地加载模块。

标签:Vue,const,meta,模块,vue3,组件,import,加载
From: https://www.cnblogs.com/guxingzhe/p/18104315

相关文章

  • vue2,3拖拽组件
    vue3//[email protected]//dom<template><Draggablev-model="list.data"class="drag-container"><template#item="{element}"><div>{{element.name}}</div>......
  • 【前端】- 在使用Element UI 的el-tree组件时,从底层去研究如何去实现一键展开/关闭【t
    第一步:首先我们先去查看elementui官方文档,发现并没有提供这个方法,没办法,只能手写一个了,先给大家看看功能点击前效果:点击后效果:第二步:废话不多说直接上代码,然后我们简单解释下代码页面部分:这里是简单的数结构渲染,不多讲,$refs.Reftree获取的是el-tree的实例,具体作用请看下......
  • vue3批量将图片添加水印并导出压缩包
    vue3批量将图片添加水印并导出压缩包<scriptsetuplang="ts">import{ref,onMounted}from'vue'importJSZipfrom'jszip'constimg_list=ref([{img:'https://img.keaitupian.cn/uploads/2020/07/20/zv2owzexj5i.jpg'},......
  • 使用 CRXJS、Vite、TypeScript、React、Zustand、Antd 开发 Chrome 浏览器插件——自
    一、CRXJS一、什么是CRXJS?CRXJSVitePlugin是一款使用现代Web开发技术制作Chrome扩展的工具二、CRXJS的作用CRXJS支持热加载和静态资源导入,无需手动构建配置工具CRXJSVite插件通过将Vite的精细功能与简单的配置策略相结合,简化了Chrome扩展开发者体验二......
  • Java Swing组件:表格
           表格(JTable)是将数据以二维的形式展示给用户,它包括行和列,每一行表示一个对象,例如一个学生,每一列表示对象的一种属性,例如学生的学号、姓名等。表格组件是采用MVC(ModelViewController)模式进行设计,按照MVC的设计理念,JTable类属于视图,对应的数据模型是TableModel接......
  • Vue组件封装:基于Vue3+wangeditor富文本组件二次封装
    1.简介    开源Web富文本编辑器,开箱即用,配置简单。一个产品的价值,就在于解决用户的问题,提高效率、降低成本、增加稳定性和扩展性。wangEditor不是为了做而做,也不是单纯的模仿谁,而是经过上述问题分析之后,给出一个系统的解决方案。旨在真正去解决用户的问题,产出自己的价......
  • Storybook version8 智能化构建组件文档与单元测试
    根据官方文档说法,storybook是一个独立构建前端UI组件与页面的车间。StorybookisafrontendworkshopforbuildingUIcomponentsandpagesinisolation.Ithelpsyoudevelopandsharehard-to-reachstatesandedgecaseswithoutneedingtorunyourwholeapp.Th......
  • React组件封装:文字、表情评论框
    1.需求描述根据项目需求,采用Antd组件库需要封装一个评论框,具有以下功能:支持文字输入支持常用表情包选择支持发布评论支持自定义表情包2.封装代码 ./InputComment.tsx1importReact,{useState,useRef,useEffect,forwardRef,useImperativeHandle}from'r......
  • 一个vue3指令,兼容pc与移动端的拖动tab切换,鼠标拖动与触摸拖动触控监听
    <Viewclass="app-tabs-container":class="{appear:state.showTabsTrans}"v-tabs-pointer-event:[state.hasMove]="handleProductChange"><router-viewv-slot="{Component}"><KeepAlive>......
  • 【前端面试题-19】简单说一下,如果前端页面要做个页面加载进度条,该通过哪些实现进度上
    前端页面要实现一个页面加载进度条,可以通过以下步骤进行进度上的把控:HTML结构:在页面中创建一个用于承载进度条的<div>元素或其他合适的元素,例如:<divid="progress-bar"><divid="progress"></div></div>progress-bar作为进度条的容器,progress则是实际表示进度的部......