vue官网推荐使用
<div>
<el-button v-for="(item,index) in com_list" :key="index" @click="currentTab = item">{{item}}</el-button>
<component :is="iscomponent"></component>
</div>
// tab-home tab-hotel tab-post 这是三个组件
com_list: ['home', 'hotel', 'post'],
currentTab : "Home" //默认展示tab-home
computed: {
iscomponent() {
return 'tab-' + this.currentTab.toLowerCase()
}
},
实际上就是 点击按钮将数组的值赋值给currentTab 再计算属性 计算iscomponent的值最终得到组件名。从而生成动态组件
效果