脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3动态加载组件

vue3动态加载组件以及动态引入组件详解

 更新时间：2023年03月23日 10:22:21   作者：做一个猛男  
​平常的vue项目开发,已经很难遇见一千行,甚至几千行代码的页面了,毕竟大家都会去拆分组件,下面这篇文章主要给大家介绍了关于vue3动态加载组件以及动态引入组件的相关资料,需要的朋友可以参考下

1.问题

在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然后控制台一直有以下提示，页面也无法渲染出来。

2.分析

根据上面的报错提示，让我们安装并使用：@rollup/plugin-dynamic-import-vars 这个插件（最终没有这个方案）。

Vite官方文档说需要使用Glob 导入形式，然后看了一个Glob的文档，解决了这个问题（亲测可行）。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块：

const modules = import.meta.glob('../views/*/*.vue');

他会匹配并导入所有相关的组件：

// vite 生成的代码
const modules = {
  './views/foo.vue': () => import('./views/foo.vue'),
  './views/bar.vue': () => import('./views/bar.vue')
}

那么回到项目中，在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件

因此，根据vite的import.meta.glob函数：就可以获得对应的custom_components文件夹下的.vue文件

const changeComponents = (e:string)=>{
	const link = modules[`../custom_components/${e}.vue`]
	console.log(link,'link')
}

打印link可以看到

最后就是异步注册组件

layouts.value = markRaw(defineAsyncComponent(link))

3.最后

下面贴出完整案例，仅供参考。有更好的或者需要优化的可以提问一起探讨。

<template>	
	<div @click="changeComponents('kk')">显示kk.vue</div>
	<div @click="changeComponents('index')">显示index.vue</div>
	<component :is="layouts"/>
</template>

<script lang='ts' setup>
	const modules = import.meta.glob('../custom_components/*.vue');
	let layouts = ref<any>(null)
	const changeComponents = (e:string)=>{
		const link = modules[`../custom_components/${e}.vue`]
        layouts.value = markRaw(defineAsyncComponent(link))
	}
</script>

总结

到此这篇关于vue3动态加载组件以及动态引入组件的文章就介绍到这了,更多相关vue3动态加载组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue如何解决兄弟组件之间传值问题

    Vue如何解决兄弟组件之间传值问题

    这篇文章主要介绍了Vue如何解决兄弟组件之间传值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 基于vue hash模式微信分享#号的解决

    基于vue hash模式微信分享#号的解决

    这篇文章主要介绍了基于vue hash模式微信分享#号的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue forEach循环数组拿到自己想要的数据方法

    vue forEach循环数组拿到自己想要的数据方法

    今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue的基本用法与常见指令

    vue的基本用法与常见指令

    Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
    2017-08-08
  • Vue自定义组件使用事件修饰符的踩坑记录

    Vue自定义组件使用事件修饰符的踩坑记录

    vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，下面这篇文章主要给大家介绍了关于Vue自定义组件使用事件修饰符的相关资料,需要的朋友可以参考下
    2021-05-05
  • vue中 this.$set的用法详解

    vue中 this.$set的用法详解

    这篇文章主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue使用NPM方式搭建项目

    Vue使用NPM方式搭建项目

    这篇文章主要介绍了Vue项目搭建过程，使用NPM方式搭建的，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • 解决elementui上传组件el-upload无法第二次上传问题

    解决elementui上传组件el-upload无法第二次上传问题

    这篇文章主要介绍了解决elementui上传组件el-upload无法第二次上传问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片较多，篇幅太长，就会比较烦恼，接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,需要的朋友可以参考下
    2018-08-08
  • Element树形控件el-tree懒加载并设置默认展开和选中的效果

    Element树形控件el-tree懒加载并设置默认展开和选中的效果

    本文主要介绍了Element树形控件el-tree懒加载并设置默认展开和选中的效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01

最新评论