Vue 将子组件包含到父插槽中

Question

我正在处理 vue 中的 tabs 组件，类似于左侧的垂直导航栏和右侧的 tab 内容。我的标签标题有图标，我正在尝试使用 <slot> 在每个标签标题中放置不同的图标。

刀片模板：

<tabs>
   <tab name="one" :selected="true">
      <svg>icon 1</svg>
   </tab>
   <tab name="two">
      <svg>icon 2</svg>
   </tab>
   <tab name="three">
      <svg>icon 3</svg>
   </tab>
<tabs>

Tabs.vue

<template>
    <ul class="my-class" role="tablist">
        <li v-for="(tab, index) in tabs" :key="index">
            <a>
                // here I want to place my icon defined in my blade view
                <slot></slot> // this doesn't work and it is showing 0 items in tab array
                <span>{{ tab.name }}</span>
            </a>
        </li>
        <slot></slot>
        // if placed here it works and it is showing 3 items in tab array
        // but icon's are placed under all 3 li elemets
    </ul>
</template>

Tab.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

我已经尝试了很多不同的组合，但没有一个成功，而且很难知道发生了什么，因为没有错误消息。我在 vue 方面没有经验，我正在尝试检查 vue 文档，但一定有什么东西让我无法理解或我没有得到什么。

有人可以告诉我错误在哪里或者我应该如何重写我的代码吗？