VueJS - 将插槽和作用域插槽向下传递给子模板中的组件

Question

我正在尝试找出一种方法，如何将插槽/作用域插槽从父组件向下传递到子组件。让我解释一下……

我使用 bootstrap-vue b-table 组件创建了一个数据表组件。一个非常简化的代码是这样的：

DataTable.vue：

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

我接受字段定义列表和 api 端点作为道具，将其传递给 b-table，一切正常。例如渲染数据表中所有用户的组件：

UsersTable.vue：

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

我面临的问题如下：

bootstrap-vue 组件 b-table 使用多个插槽。例如用于更改表格标题 (<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>