将上面代码用vue3.0实现

好的，以下是使用 Vue 3.0 实现的代码：

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

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    initialTab: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const activeTab = ref(props.initialTab);

    const selectTab = (index) => {
      activeTab.value = index;
    };

    return {
      activeTab,
      selectTab,
    };
  },
});
</script>

<style>
.tab-header {
  display: flex;
}

.tab-item {
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-right: 8px;
}

.tab-item.active {
  background-color: #eee;
  border-bottom: 1px solid #eee;
}

.tab-content {
  border: 1px solid #ccc;
  border-top: none;
  padding: 16px;
  border-radius: 0 4px 4px 4px;
}
</style>

这个组件的使用方法和 Vue 2.x 的版本相同，但是由于 Vue 3.0 引入了 Composition API，所以我们使用了 `defineComponent` 和 `ref` 来定义组件和响应式数据。

在 `setup` 函数中，我们使用 `ref` 创建了一个名为 `activeTab` 的响应式变量，并将其初始化为 `props.initialTab`。我们还定义了一个名为 `selectTab` 的函数，用于处理用户点击选项卡的事件。

最后，我们使用 `return` 语句将 `activeTab` 和 `selectTab` 导出，以便在模板中使用。