Передача динамических c слотов от родителя к потомку внуку - PullRequest
Новая
       5

Передача динамических c слотов от родителя к потомку внуку

0 голосов
/ 18 июня 2020

Кто-нибудь знает, как передавать динамические c слоты от родителей к внукам?

Я знаю, как это сделать с именованными слотами stati c, но не с динамическими c именованные слоты.

Например, предположим, что шаблон слота - это 'name' в родительском элементе, а у внука есть слот, основанный на столбцах Dynami c.

Как добавить шаблон в дочернем элементе, чтобы передать это.

Вот пример моего кода: 

// GrandChild.vue

<template>
    <table>
        <tbody>
            <template v-for="(item, itemIndex) in items">
                <tr :key="itemIndex">
                    <template v-for="(col, colIndex) in columns">
                        <slot
                          v-if="$scopedSlots[col]"
                          :name="col"
                          :item="item"
                        />
                        <td
                          v-else
                          :key="colIndex"
                        >
                          {{ String(item[col]) }}
                        </td>
                    </template>
                </tr>
            </template>
        </body>
    </table>
</template>

<script>
    export default {
        props: ['items', 'columns']
    }
</script>

// Child.vue

<template>
    <grand-child :items="items" :columns="columns">
        <!-- not sure what goes here -->
    </grand-child>
</template>

<script>
    export default {
        props: ['items', 'columns']
    }
</script>

// Parent.vue

<template>
    <child :items="items" :columns="columns">
        <template #name="{item}">
            <td>Name is {{ item.name }}</td>
        </teamplate>
    </child>
</template>

<script>
    export default {
        data () {
            return {
                items: [
                    {id: 1, name: 'Item 1'},
                    {id: 2, name: 'Item 2'},
                    {id: 3, name: 'Item 3'},
                    {id: 4, name: 'Item 4'}
                ],
                columns: ['id', 'name']
            }
        }
    }
</script>

Любая помощь приветствуется.

1 Ответ

1 голос
/ 19 июня 2020

Я разобрался. Я отвечу на свой вопрос, если это может помочь кому-то другому в будущем.

Чтобы связать родителя и внука, я помещаю следующее в промежуточный компонент (в моем случае Child. vue) 

<template v-for="field in Object.keys($scopedSlots)" v-slot:[field]="{item}">
    <slot :name="field" :item="item"/>
</template>

Полный код: 

// Child.vue

<template>
    <grand-child :items="items" :columns="columns">
        <template v-for="field in Object.keys($scopedSlots)" v-slot:[field]="{item}">
            <slot :name="field" :item="item"/>
        </template>
    </grand-child>
</template>

<script>
    export default {
        props: ['items', 'columns']
    }
</script>
...