比如你想实现一个动态传入组件的地址,根据传入的地址显示组件的内容。
父组件
<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>
这样一个动态引入组件就实现了