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

Question

我试图找出一种方法，将插槽/作用域槽从父组件向下传递给子组件。让我解释一下..。

我使用引导-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>

我面临的问题如下：

引导-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>