vue3+ts的tad栏怎么做

在Vue3中使用TypeScript来创建一个Tab栏的步骤如下：

1. 创建一个新的Vue组件，用于Tab栏的显示和逻辑处理。
2. 在组件中定义一个props属性，用于接收Tab栏的数据源。
3. 使用v-for指令将数据源遍历到Tab栏中，生成每个Tab项的DOM结构。
4. 在Tab项中添加点击事件处理函数，用于切换Tab项的选中状态。
5. 在组件中定义一个data属性，用于记录当前选中的Tab项。
6. 使用class绑定指令，根据当前选中的Tab项设置不同的样式。
7. 在组件中定义一个emit方法，用于向父组件发送当前选中的Tab项。

下面是一个简单的示例代码：

<template>
  <div class="tab">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      :class="['tab-item', { active: index === currentTab }]"
      @click="setCurrentTab(index)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface Tab {
  label: string;
  content: string;
}

export default defineComponent({
  name: 'Tab',
  props: {
    tabs: {
      type: Array as () => Tab[],
      required: true,
    },
  },
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    setCurrentTab(index: number) {
      this.currentTab = index;
      this.$emit('tab-change', index);
    },
  },
});
</script>

<style scoped>
.tab {
  display: flex;
}

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

.tab-item.active {
  background-color: #ccc;
}
</style>

在父组件中使用这个Tab组件：

<template>
  <div>
    <tab :tabs="tabs" @tab-change="handleTabChange" />
    <div>{{ tabs[currentTab].content }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Tab from './Tab.vue';

export default defineComponent({
  name: 'App',
  components: {
    Tab,
  },
  data() {
    return {
      tabs: [
        { label: 'Tab 1', content: 'Content 1' },
        { label: 'Tab 2', content: 'Content 2' },
        { label: 'Tab 3', content: 'Content 3' },
      ],
      currentTab: 0,
    };
  },
  methods: {
    handleTabChange(index: number) {
      this.currentTab = index;
    },
  },
});
</script>