vue3+ts实现动态tabs标签页

首先，我们需要使用 Vue3 的 Composition API 和 TypeScript。

首先，我们可以创建一个 `Tab` 接口来描述我们 Tabs 的数据结构：

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

接着，我们可以创建一个 `Tabs` 组件，里面包含一个 `Tab` 数组，以及当前激活的 Tab 的索引：

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

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

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

export default defineComponent({
  name: 'Tabs',
  props: {
    tabs: {
      type: Array as () => Tab[],
      required: true,
    },
  },
  setup(props) {
    const activeTabIndex = ref(0);

    return {
      tabs: props.tabs,
      activeTabIndex,
    };
  },
});
</script>

现在，我们就可以在父组件中动态地传递 `Tab` 数组给 `Tabs` 组件了：

<template>
  <div>
    <button @click="addTab">Add Tab</button>
    <tabs :tabs="tabs" />
  </div>
</template>

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

import Tabs from './Tabs.vue';

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

export default defineComponent({
  name: 'App',
  components: {
    Tabs,
  },
  setup() {
    const tabs = ref<Tab[]>([
      { title: 'Tab 1', content: 'Content 1' },
      { title: 'Tab 2', content: 'Content 2' },
    ]);

    const addTab = () => {
      tabs.value.push({
        title: `Tab ${tabs.value.length + 1}`,
        content: `Content ${tabs.value.length + 1}`,
      });
    };

    return {
      tabs,
      addTab,
    };
  },
});
</script>

现在，我们可以通过点击“Add Tab”按钮动态地添加标签页了。