Adakah yang tahu cara meneruskan slot dinamis dari orang tua ke cucu?

Saya tahu bagaimana melakukannya dengan slot bernama statis tetapi tidak dengan slot bernama dinamis.

Misalnya, templat slot adalah 'nama' di induk dan cucu memiliki slot berdasarkan kolom dinamis.

Bagaimana cara menambahkan templat pada anak untuk meneruskan ini.

Berikut ini contoh kode saya:

// 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>

Setiap bantuan dihargai.

0
CUGreen 18 Juni 2020, 08:23

1 menjawab

Jawaban Terbaik

Saya telah mengerjakannya. Saya akan menjawab pertanyaan saya sendiri jika itu dapat membantu orang lain di masa depan.

Untuk menjembatani orang tua dan cucu, saya meletakkan yang berikut ini di komponen perantara (dalam kasus saya Child.vue)

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

Kode lengkap:

// 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>
1
CUGreen 18 Juni 2020, 23:24