vue3之异步组件

最新推荐文章于 2025-10-31 15:50:01 发布

原创最新推荐文章于 2025-10-31 15:50:01 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #html5

本文介绍如何在Vue 3应用中使用`defineAsyncComponent`实现动态加载组件，重点讲解了通过`import()`引入并处理 Vue 组件的示例，适合前端开发者了解组件异步加载的技巧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	   <name></name>
    </div>

  
   






</body>
<script src="js/vue3.js"></script>
<script>
	const app=Vue.createApp({
		data(){
			return {aa:"1111"}
		}


	});
	app.component("name",
		Vue.defineAsyncComponent(()=>{
			//只能做个大概写法,未实际去使用,反正可以引入.vue文件(包括script,style,css),发生异常可以调整
			import('@/components/AsyncComponent.vue')

		}
         
    );