Слот с несколькими динамическими именами - PullRequest
Новая
       18

Слот с несколькими динамическими именами

0 голосов
/ 28 февраля 2019

У меня есть 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>

Но это не отображает содержимое прохода вкладок, который я передаю, консоль и терминал не отображают никаких ошибок.

Как этого достичь?

...