vue+ant实现多标签切换组件

我们在项目中经常会遇到tab切换的需求，antDesign和ElementUI组件库也写了一些tab切换的案例，但是当tab切换对应的内容稍微复杂的情况下，虽然同一组件开发也是可以实现的，但是相对于代码来说就显得冗余。因此今天在这里分享一下简单的方法
效果图：

tabs切换.gif

在tabs文件夹里面新建三个组件（这是和tab切换对应的组件，需要几个新建几个）

image.png

Home组件
在home组件中引入需要的组件（在tabs文件夹下的三个组件）
注意：1.引入组件赋值的名字和tab循环的list的key对应起来

<template>
  <a-card title="tabs切换">
    <a-tabs v-model="activeName" @change="callback">
      <a-tab-pane :tab="item.name" v-for="item in tabList" :key="item.key">
        <component :is="currentView"></component>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
// 引入所需组件
import FirstItem from '../tabs/firstItem.vue'
import SecondItem from '../tabs/secondItem.vue'
import ThirdItem from '../tabs/thirdItem.vue'
export default {
 // 引入组件赋值的名字和tabList的key相对应
  components: {
    first: FirstItem,
    second: SecondItem,
    third: ThirdItem
  },
  data() {
    return {
      tabList: [
        {
          name: '第一项组件',
          key: 'first'
        },
        {
          name: '第二项组件',
          key: 'second'
        },
        {
          name: '第三项组件',
          key: 'third'
        }
      ],
      activeName: 'first',
      currentView: 'first'
    }
  },
  methods: {
    callback(key) {
      this.currentView = key
    }
  }
}
</script>
<style scoped></style>

firstItem组件

<template>
    <div>
        <h1>第一项组件</h1>
    </div>
</template>
<script>
export default {
    name:'firstItem',
    data(){
        return{
            
        }
    }
}
</script>

secondItem组件

<template>
    <div>
        <h1>第二项组件</h1>
    </div>
</template>
<script>
export default {
    name:"secondItem",
    data(){
        return{
            
        }
    }
}
</script>

thirdItem组件

<template>
    <div>
        <h1>第三项组件</h1>
    </div>
</template>
<script>
export default {
    name:"thirdItem",
    data(){
        return{
            
        }
    }
}
</script>

这里我用antDesign组件库给大家展示的tab切换已经实现完成啦！如有疑问，大家也可以留言或私聊我哦。都看到这里了，麻烦动动手指点个赞再走呗(^▽)