实现一个vue tab组件

以下是一个简单的Vue Tab组件的示例代码：

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

<script>
export default {
  name: 'Tabs',
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTab: 0
    };
  }
};
</script>

<style>
.tabs {
  display: flex;
  flex-direction: column;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  background-color: #eee;
}

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

使用示例：

<template>
  <div>
    <tabs :tabs="tabs">
      <div slot="tab1">
        Tab 1 Content
      </div>
      <div slot="tab2">
        Tab 2 Content
      </div>
      <div slot="tab3">
        Tab 3 Content
      </div>
    </tabs>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Tabs
  },
  data() {
    return {
      tabs: [
        { title: 'Tab 1', name: 'tab1' },
        { title: 'Tab 2', name: 'tab2' },
        { title: 'Tab 3', name: 'tab3' }
      ]
    };
  }
};
</script>

在这个示例中，我们使用了一个Tabs组件来渲染一个标签页。我们传递了一个tabsprop给Tabs组件，它是一个包含每个标签页的标题和名称的数组。我们还使用了一个slot元素来渲染标签页的内容，这个slot元素的名称与每个标签页的名称相匹配。

当用户点击标签时，我们通过activeTab变量来追踪当前激活的标签页，并使用Vue的条件类语法来添加一个active类来突出显示当前激活的标签。最后，我们使用Vue的插槽功能来动态渲染标签页的内容