uniapp中用vue3把tabs标签封装成组件

好的，让我来为您解答。在Uniapp中，可以使用Vue3将tabs标签封装成组件，以下是一个示例：

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

<script>
export default {
  name: 'Tabs',
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTab: 0
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index
    }
  }
}
</script>

<style scoped>
.tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tabs-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}

.tabs-header div {
  cursor: pointer;
  padding: 10px;
}

.tabs-header div.active {
  border-bottom: 2px solid black;
}

.tabs-content {
  flex: 1;
  overflow-y: auto;
}
</style>

在使用该组件时，只需要传入一个包含标签名的数组即可：

<template>
  <Tabs :tabs="['Tab 1', 'Tab 2', 'Tab 3']">
    <template #Tab 1>
      <div>Content for Tab 1</div>
    </template>
    <template #Tab 2>
      <div>Content for Tab 2</div>
    </template>
    <template #Tab 3>
      <div>Content for Tab 3</div>
    </template>
  </Tabs>
</template>

<script>
import Tabs from '@/components/Tabs'

export default {
  components: {
    Tabs
  }
}
</script>

这样就可以实现一个简单的tabs组件了。希望能对您有所帮助。