VueJS - передача слотов и слотов с областями видимости до компонента в дочернем шаблоне

Question

Я пытаюсь выяснить, как передать слоты / слоты в области видимости вниз от родительского компонента к дочернему компоненту.Позвольте мне объяснить ...

Я создал компонент таблицы данных, используя компонент bootstrap-vue b-table .Очень упрощенный код будет выглядеть примерно так:

DataTable.vue:

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

Я принимаю список определений полей и конечную точку API как проп, пасдо b-table , и все работает нормально.Например, компонент для отображения всех пользователей в DataTable:

UsersTable.vue:

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

Проблема, с которой я сталкиваюсь, следующая:

компонент начальной загрузки b-таблица использует несколько слотов.Например, слот для изменения заголовка таблицы (<template slot="table-caption">This is a table caption.</template>), или слоты с областью действия для форматирования полей в таблице, или для разрешения символов HTML (<span slot="email" slot-scope="data" v-html="data.value"></span>).

Как я могу пропустить оба слотаи области слотов из компонента UsersTable в компонент DataTable, чтобы они были доступны как слоты в компоненте b-table ?Спасибо за любую помощь.

Answer 1

Может быть, я не думаю прямо сейчас, но мне кажется, что вы можете просто добавить слоты с одинаковыми именами в свои DataTable.vue:

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