基于Vue实现实现tab栏切换效果

好的，下面是基于Vue实现tab栏切换效果的代码：

<template>
  <div class="tab">
    <div class="tab-header">
      <div v-for="(item, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="activeIndex = index">{{ item.title }}</div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  data() {
    return {
      tabs: [],
      activeIndex: 0
    }
  },
  mounted() {
    this.tabs = this.$children
  }
}
</script>

<style scoped>
.tab-header {
  display: flex;
  justify-content: space-around;
}

.tab-header > div {
  padding: 10px;
  cursor: pointer;
}

.tab-header > .active {
  border-bottom: 2px solid #333;
}

.tab-content {
  margin-top: 10px;
}
</style>

使用方法：

<template>
  <div>
    <tab>
      <tab-item title="Tab 1">Tab 1 content</tab-item>
      <tab-item title="Tab 2">Tab 2 content</tab-item>
      <tab-item title="Tab 3">Tab 3 content</tab-item>
    </tab>
  </div>
</template>

<script>
import Tab from './Tab.vue'
import TabItem from './TabItem.vue'

export default {
  name: 'App',
  components: {
    Tab,
    TabItem
  }
}
</script>

其中，Tab组件作为tab栏的容器，TabItem组件作为每个tab项的内容。可以根据需要自定义样式。