用vue 写一个tab 切换

这是一个使用 Vue.js 实现 tab 切换的简单代码示例：

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

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Tab 1 content' },
        { title: 'Tab 2', content: 'Tab 2 content' },
        { title: 'Tab 3', content: 'Tab 3 content' },
      ],
    };
  },
};
</script>

<style>
.tab-header {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.tab-header li.active {
  background-color: #ddd;
}
</style>

在父组件中使用该组件：

<template>
  <tab-component>
    <template v-slot:default="{ tab }">
      {{ tab.content }}
    </template>
  </tab-component>
</template>

<script>
import TabComponent from './TabComponent.vue';

export default {
  components: {
    TabComponent,
  },
};
</script>

该代码实现了一个通过单击标签切换内容的简单 tab 组件。