vue之Tab切换组件

代码如下（示例）：

1、方式一

代码如下（示例）：

//头部切换 <ul class="tab-tilte"> <li :class="{active:index===cur}" v-for="(item,index) in tabList" :key="index" @click="toggleTab(index)">{{item.name}}</li> </ul> //内容组件 <div v-show="cur==0"> <complainExamine></complainExamine> </div> <div v-show="cur==1"> <complainSingle></complainSingle> </div> <div v-show="cur==2"> <receivingRecord></receivingRecord> </div> import complainSingle from '@/views/components/complainSingle' import receivingRecord from '@/views/components/receivingRecord' import complainExamine from '@/views/components/complainExamine' export defaylt { components: { complainSingle, receivingRecord, complainExamine }, data(){ cur:0, tabList: [ { name: '刘' }, { name: '慧' }, { name: '敏' } ] }, methods:{ toggleTab(index) { this.cur = index }, } } 方式一的原文链接：https://www.cnblogs.com/xhrr/p/11201939.html

2.方式二

代码如下（示例）：

//头部切换 <ul> <li v-for="(item,index) in tabLable" :key="index" @click="handleToggle(item,index)" :class="{active:active===index}"> {{item.label}} </li> </ul> // :is实现多个组件实现同一个挂载点、切换内容 <component :is="currentView" @close="$emit('close')" @success="submitFormData"> </component> import liuTab from '../components/liuTab' import huiTab from '../components/huiTab' import minTab from '../components/minTab' export default{ components: { liuTab, huiTab, minTab }, data(){ currentView: 'liuTab', active: 0, tabLable: [ { label: '刘呵呵', component: 'liuTab' }, { label: '慧嘻嘻', component: 'huiTab' }, { label: '敏哈哈', component: 'minTab' }, ], }, methods:{ handleToggle(item, index) { this.active = index this.currentView = item.component }, } } 方式二的原文连接：https://www.cnblogs.com/sunjuncoder/p/9897491.html

---