VueJS - passing slots and scoped slots down to the component in child template

Question

I'm trying to figure out a way how to pass slots/scoped slots down from a parent component to a child component. Let me explain...

I've created a data table component using bootstrap-vue b-table component. A very simplified code would be something like this:

DataTable.vue:

<template>
    <div>
        <page-selector/>
        <b-table></b-table>
        <pager/>
    </div>
</template>

I accept a list of fields definition and api endpoint as a prop, pass it down to b-table, and everything is working fine. For example component to render all the users in the DataTable:

UsersTable.vue:

<template>
     <data-table :fields="fields" :url="url"/>
</template>

The problem I'm facing is following:

bootstrap-vue component b-table uses multiple slots. For example a slot to change a table caption (<template slot="table-caption">This is a table caption.</template>), or scoped slots to format fields in the table, or to allow html characters (<span slot="email" slot-scope="data" v-html="data.value"></span>).

How am I able to pass both slots and scoped slots from UsersTable component to DataTable component so they are available as slots in the b-table component? Thanks for any help.

Answer 1

Maybe I am not thinking straight right now but it seems to me that you can just add the same named slots in your DataTable.vue:

<template>
    <div>
        <page-selector/>
        <b-table>
            <template slot="table-caption"><slot name="table-caption"></slot></template>
            ....
        </b-table>
        <pager/>
    </div>
</template>