假设有一个需求,后台把矩形数据和圆的数据放在一起组成列表传给前端,前端根据数据不同加载不同的模板。
数据格式:
shapeList:[{type:'rect',info:{height:10,width:20}},{type:'circle',info:{r:5},...}]
代码:
//组件Rect.vue
<template>
<div>
这是一个矩形,高{{info.height}}宽{{info.width}}
</div>
</template>
...
//组件Circle.vue
<template>
<div>
这是一个圆,半径{{info.r}}
</div>
</template>
...
//页面main.vue
<template>
<div>
<component v-for="(item,index) in shapeList" :is="item.type" :key="index" :info="item.info"></component>
</div>
</template>
...
这样就可以实现按照数据的不同需求,动态加载不同的模板。其实也可以在一个Shape组件里面实现Rect和Circle,使用v-if控制显示的组件。Main.vue里面通过v-for加载模板,这样就是把逻辑放在组件里面了。