vue3动态加载组件及动态引入组件怎么使用-Vue.js-PHP中文网

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

王林

发布： 2023-05-11 12:01:14

转载

3523 人浏览过

1.问题

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

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

2.分析

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

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

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

const modules = import.meta.glob(&#39;../views/*/*.vue&#39;);

登录后复制

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

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

登录后复制

那么回到项目中，在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,&#39;link&#39;)
}

登录后复制

打印link可以看到

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

最后就是异步注册组件

layouts.value = markRaw(defineAsyncComponent(link))

登录后复制

3.最后

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

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

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

登录后复制

以上是vue3动态加载组件及动态引入组件怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章！