vue3写个tabs组件，使用类似于<uui-tabs v-model="tabsaa" @change="change"> <uui-tabs-item label="配置管理" name="tab-1"> <p>你选择了配置管理</p> </uui-tabs-item> <uui-tabs-item label="角色管理" name="tab-2"> <p>你选择了角色管理</p> </uui-tabs-item> <uui-tabs-item label="啊啊哦哦" name="tab-3"> <p>你选择了啊啊哦哦</p> </uui-tabs-item> </uui-tabs>，写出完整代码

好的，下面是一个简单的示例：

<template>
  <div class="uui-tabs">
    <div class="uui-tabs-nav">
      <div class="uui-tabs-nav-item" 
           :class="{ active: activeTab === item.name }" 
           v-for="item in tabs"
           :key="item.name"
           @click="changeTab(item)">
        {{ item.label }}
      </div>
    </div>
    <div class="uui-tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UUITabs',
    props: {
      value: { // 绑定选中的标签页名称
        type: String,
        default: ''
      }
    },
    data() {
      return {
        tabs: [], // 标签页列表
        activeTab: this.value // 当前选中的标签页名称
      }
    },
    watch: {
      value(newValue) { // 监听 value 的变化
        this.activeTab = newValue
      }
    },
    methods: {
      changeTab(tab) { // 切换标签页
        this.activeTab = tab.name
        this.$emit('change', tab)
      }
    }
  }
</script>

使用示例：

<template>
  <div>
    <uui-tabs v-model="activeTab" @change="changeTab">
      <uui-tabs-item label="配置管理" name="tab-1">
        <p>你选择了配置管理</p>
      </uui-tabs-item>
      <uui-tabs-item label="角色管理" name="tab-2">
        <p>你选择了角色管理</p>
      </uui-tabs-item>
      <uui-tabs-item label="啊啊哦哦" name="tab-3">
        <p>你选择了啊啊哦哦</p>
      </uui-tabs-item>
    </uui-tabs>
    <p>当前选中的标签页是：{{ activeTab }}</p>
  </div>
</template>

<script>
  import UUITabs from './UUITabs.vue'
  import UUITabsItem from './UUITabsItem.vue'

  export default {
    components: {
      UUITabs,
      UUITabsItem
    },
    data() {
      return {
        activeTab: 'tab-1'
      }
    },
    methods: {
      changeTab(tab) {
        console.log(tab.label, '被选中了')
      }
    }
  }
</script>

注意：上面的示例代码仅供参考，具体实现方式可能因项目需求而异。