vue-music 关于基础组件（Tab组件）-优快云博客

本文介绍了一个基于 Vue 的 Tab 组件实现方式，通过定义 tab 切换数量的数组和当前高亮索引的 props 来控制 tab 的显示状态。文章详细展示了如何使用 v-for 循环渲染 tab 项，并通过点击事件实现 tab 的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义在项目的基础组类别的 tab组件中，定义一个tab切换数量的数组和一个currentIndex 当前高亮索引的props，当前高亮（active）的类等于currentIndex === index 当前循环的索引值，增加点击派发事件传入index 索引参数，

调用组件的页面接受派发事件点击的index 索引，底下的内容根据this.currentIndex 的值v-if 显示隐藏

tab组件

<template>
  <ul class="switches">
    <li class="switch-item" v-for="(item,index) in switches" :class="{'active':currentIndex === index}"
        @click="switchItem(index)">
      <span>{{item.name}} </span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      switches: {
        type: Array,
        default: []
      },
      currentIndex: {
        type: Number,
        default: 0
      }
    },
    methods: {
      switchItem(index) {
        this.$emit('switch', index)
      }
    }
  }
</script>

调用

<switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>

data() {
  return {
    currentIndex: 0,
    switches: [
      {
        name: '最近播放'
      },
      {
        name: '搜索历史'
      }
    ]
  }
},

switchItem(index) {
  this.currentIndex = index
},

转载于:https://www.cnblogs.com/catbrother/p/9180503.html