温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3动态加载组件及动态引入组件怎么使用

发布时间:2023-03-25 17:59:00 来源:亿速云 阅读:310 作者:iii 栏目:开发技术

本篇内容介绍了“vue3动态加载组件及动态引入组件怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

1.问题

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

vue3动态加载组件及动态引入组件怎么使用

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文件

vue3动态加载组件及动态引入组件怎么使用

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

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

打印link可以看到

vue3动态加载组件及动态引入组件怎么使用

最后就是异步注册组件

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动态加载组件及动态引入组件怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI