动态组件是指:在一个挂载点使用多个组件,并进行动态切换。
组件类型不确定,需要根据数据,动态渲染的场景下,我们会使用到动态组件。你看下面的新闻详情页,详情页里的组件类型不确定、需要渲染的组件数量也不确定,可能这个页面是图文结合的,另个页面是视频和文字结合的,这种场景就正中“动态组件”下怀了!
动态组件语法:
<component :is="component-name"></component>
示例代码:
<template>
<div>
<div v-for="item in newsList" :key="item.id">
<component :is="item.type" />
</div>
</div>
</template>
<script>
import ImageComp from './components/image-comp.vue'
import VideoComp from './components/video-comp.vue'
import TextComp from './components/text-comp.vue'
export default {
components: { ImageComp, VideoComp, TextComp },
data() {
return {
// 模拟接口数据
newsList: [
{
id: 1,
type: 'TextComp'
},
{
id: 2,
type: 'TextComp'
},
{
id: 3,
type: 'ImageComp'
}
]
}
}
}
</script>
End----------------------------