在 v-for 循环 vuejs 中插入命名槽

Question

有谁知道如何在循环中插入命名槽？例如，我有这个代码：儿童

<div v-for="num in nums" :key="num">
    <slot name="foo"></slot>
</div>

而父母是这样的：

<foo-component :nums="nums>
    <template slot="foo">
        <span>Inside the foo component</span>
    </template>
</foo-component>

如果我这样做，控制台将显示此警报：

Duplicate presence of slot "foo" found in the same render tree - this will likely cause render errors.

有谁知道如何做到这一点？
提前致谢

Answer 1

插槽名称必须是唯一的。如果要在循环内创建插槽，可以在插槽名称中添加一个数字，例如：

<div v-for="num in nums" :key="num">
    <slot :name="'foo_' + num"></slot>
</div>

然后像这样使用它们：

<foo-component :nums="3">
    <template slot="foo_1">
        <span>Inside the foo component slot 1</span>
    </template>
    <template slot="foo_2">
        <span>Inside the foo component slot 2</span>
    </template>
    <template slot="foo_3">
        <span>Inside the foo component slot 3</span>
    </template>
</foo-component>