Vue结合component实现动态引入组件

比如你想实现一个动态传入组件的地址，根据传入的地址显示组件的内容。

父组件

<template>
	<div>
		<button @click="showChildCompoent('/list/index')">显示列表组件</button>
		<button @click="showChildCompoent('/detail/index')">显示详情组件</button>
		下面是我要显示的子组件
		<childCompoent ref="childCompoentRef"  />
	</div>
</template>

<script>
	import childCompoent from "./childCompoent.vue"
	export default {
		components:{
			childCompoent 
		},
		methods: {
			showChildCompoent(path){
				this.$refs.childCompoentRef.currentComponent=() => import(`@/views/${path}.vue`);
			}
		}
	}
</script>

已封装好的子组件：childCompoent.vue

<template>
	<div>
		<component :is="currentComponent" v-if="currentComponent"></component>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentComponent: null
			}
		},
	}
</script>

这样一个动态引入组件就实现了