vue3如何在script中声明组件？

Question

如下例：父组件

<template>
  <Container :tabs="tabs">
  </Container>
</template>

<script lang="ts" setup>
import Container from '@/components/container/index.vue';
const tabs = [
  { title: "tab1", extra: <div>111</div> },
  { title: "tab2", extra: <div>111</div> },
];

</script>

子组件中类型

<template>
    <div v-for="tab in tabs">
        {{ tab.extra }}
    </div>
</template>

类似这样的写法，vue中应该怎么完成呢？

---

我尝试使用slot

// 子组件
<template>
    <div v-for="tab in tabs">
        <slot name="extra"><slot>
    </div>
<template>
// 父组件
<template>
    <Container :tabs="tabs">
        <template v-slot:extra>111</template>
    </Container>
<template>

但是这样只能设置单一的slot，无法根据tabs不同显示不同的内容

Answer 1

这两个文档仔细看一下可以解决你的问题
https://cn.vuejs.org/api/sfc-...
https://cn.vuejs.org/guide/co...

Answer 2

看到VUE这么横行其道，使我想起了TP已是多么的墓气沉沉...
国人呐，总是这么急功近利，买椟还珠。。。

Answer 3

<template>
    <div v-for="tab in tabs">
       <component :is="tab.extra"></component>
    </div>
</template>