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>

我面临的问题是：

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>

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

1 个答案: