[Vuejs]-Passing dynamic slots down from parent to child to grandchild

by

7👍

✅

I have worked it out. I will answer my own question in case it can help someone else in the future.

To bridge the parent and grandchild, I put the following in the intermediate component (in my case Child.vue)

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

Full code:

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

Leave a comment