Vue动态加载组件

首先我们回顾以下静态的组件加载方式

首先是创建组件文件

然后在需要使用的页面中引入并注册

然后就可以在页面中使用

这是静态引入的做法，那我们看看要动态引入组件是怎么做的

先写一个简单的子组件

<template>
	<div>
		<h2>我是子组件</h2>
	</div>
</template>

<script>
	export default{
		name:"test",
		data(){
			return{
				
			}
		}
	}
</script>

<style>
</style>

动态引入需要通过<component>元素加上is的特征来实现

<template>
	<div>
		<h1>我是父组件</h1>
		<component v-bind:is="MyComponent"></component>
	</div>
</template>

然后再在MyComponent这里引入组件就行

        data(){
			return{
				MyComponent:() => import('../components/test.vue')
			}
		}

效果展示

需要源码的同学可以在这里下载

 https://github.com/nicedays/dyComponent