动态组件

需求场景

• 组件不确定，需要动态传递

语法

• <component :is="ComponentName"></component>

例子

• 一篇博客，内容中的文字和图片的顺序不确定，如何渲染这博客

<template>
	<div v-for="(val, key) in data" :key="key">
     	<component :is="val.name"></component>
 	</div>
</template>
<script>
import Text1 from './Text1'
import Text2 from './Text2'
import Img from './img'

export default {
 components: {
     Text1,
     Text2,
     Img
 },
 data(){
     return {
         data: {
             d1: {name: 'Text1'},
             d2: {name: 'Img'},
             d3: {name: 'Text2'}
         }
     }
 }
}
</script>