vue.js - VueJS - 将插槽和作用域插槽传递给子模板中的组件

Question

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

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

数据表.vue:

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

我接受字段定义列表和 api 端点作为 Prop ，将其传递给 b-table，一切正常。例如用于呈现 DataTable 中所有用户的组件:

用户表.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>