多个动态命名插槽

Question

我有一个Vue(2.6.x)组件tabs，它有一个element道具，可以接受array个对象，这些对象的名称为slot，所以我想遍历array并为每个元素获取一个插槽，并像这样在父级中传递它

父项

<tabs-component :elements="elements">
    <template #tab1>
        <!-- Here goes html -->
        My first tab content
    </template>
    <template #tab2>
        <!-- Here goes html -->
        My first tab content
    </template>
    <template #tab3>
        <!-- Here goes html -->
        My first tab content
    </template>
</tabs-component>
<script>
    export default {
        data() {
            return {
                elements: [{
                    id:1, 
                    slot:'tab1'
                },{
                    id:2,
                    slot:'tab2'
                },{
                    id:3,
                    slot:'tab3'
                }]
            }
        }
    }
</script>

然后在component中，我要这样做。

<template>
    <div>
        <div  v-for="element in elements" :key="element.id">
            <slot:name="element.slot">
            </slot>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            elements: {
                type: Array,
                required: true
            }
        }
    }
</script>

但这不会呈现我传递的选项卡槽的内容，控制台和终端没有显示任何错误。

如何实现？