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

Posted 2023-02-22

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

【英文标题】：VueJS - passing slots and scoped slots down to the component in child template

【发布时间】：2018-11-11 11:10:30

【问题描述】：

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

我使用 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 组件中的槽使用？感谢您的帮助。

【参考方案1】：

也许我现在想的不是很清楚，但在我看来，您可以在 DataTable.vue 中添加相同的命名插槽：

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

【讨论】：

谢谢！当然，这起到了作用，现在对我来说看起来很明显，#facepalm。作用域插槽的类似方法是什么？问题是插槽名称是动态的，只有 UsersTable 知道，因为它包含来自 :fields 的特定字段的名称。

所以在搜索了一下之后，在我看来它可能并不那么容易。我可以在 DataTable 组件中访问 this.$scopedSlots，但找不到如何将其绑定到 b-table 的 scopedSlots 的方法。

看起来this PR 会是一个解决方案...