我做了一个基于Bootstrap的自定义accordion组件。我还做了一个基于Bootstrap的自定义tab组件，都是为我的Vue 3 Composition API应用程序。
My Tab组件接收：

• 标签
• 图标
• 组件，它应该呈现

我的 accordion 组件是一样的。
现在，我发送给Tabs组件的每个组件都有不同的API调用，比如getSettings、getLogo等。API调用只在我单击选项卡时触发。因此，如果我单击“Settings”选项卡，它只会触发“getSettings”（后端调用）。
这是完美的工作。
我想对我的Accordion组件做同样的事情，但是当我在视图上使用它时，它只会立即触发组件中的所有API调用。我只想触发当前Accordion面板中组件中的API调用。
我想这对 accordion 来说可能是不可能的，因为它不知道面板的高度，所以这个组件的工作方式与标签组件不同。但我不想只是假设，然后给予。
所以我的问题是，这可能吗？有没有可能只触发当前openend accordion项的API调用？
例如，如果我单击Logo accordion项，它应该只触发“getLogo”（后端调用），或者这是不可能的？
下面是我的Tabs组件：

<template>
  <ul class="nav nav-tabs nav-icons" :id="id" role="tablist" :class="{ 'nav-fill': isFullWidth }">
    <li class="nav-item" role="presentation"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @click="currentTab = index">
      <button class="nav-link justify-content-center" :class="[{ active: currentTab === index }]" :id="index" data-bs-toggle="tab" :data-bs-target="tab.key + '-tab-pane'" type="button" role="tab" :aria-controls="tab.key + '-tab-pane'" aria-selected="true">
        <BootstrapIcon :icon="tab.icon" :variant="tab.iconVariant" />
        <span>{{ $t(tab.translation) }}</span>
      </button>
    </li>
  </ul>
  <div class="tab-content my-4">
    <div class="tab-pane fade show active" role="tabpanel" tabindex="0">
      <component :is="tabs[currentTab].component"></component>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useI18n } from "vue-i18n"

const { t } = useI18n()

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  tabs: {
    type: Array,
    required: true,
  },
  isFullWidth: {
    type: Boolean,
    default: true
  }
});

const currentTab = ref(0)

</script>

字符串
这是我的Accordion组件：

<template>
  <div class="accordion accordion-flush" :id="id">
    <div class="accordion-item" v-for="(item, index) in items" :key="index">
      <h2 class="accordion-header" :id="'heading-' + item.id">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#collapse' + item.id" :aria-expanded="currentItem === item.id ? 'true' : 'false'" :aria-controls="'collapse' + item.id" @click="currentItem = item.id">
          <BootstrapIcon :icon="item.icon"></BootstrapIcon>
          <span class="ms-3 font-weight-bold">{{ $t(item.translation) }}</span>
        </button>
      </h2>
      <div :id="'collapse' + item.id" class="accordion-collapse collapse" :class="{ 'show': currentItem === item.id }" :aria-labelledby="'heading' + item.id" :data-bs-parent="'#' + id">
        <div class="accordion-body">
          <component :is="item.component"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  items: {
    type: Array,
    required: true
  }
})

const currentItem = ref(null)
</script>

型