我正在尝试找出一种方法来将插槽/作用域插槽从父组件向下传递到子组件。让我解释一下...
我使用 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 组件中的插槽使用?感谢您的帮助。
最佳答案
也许我现在没有想清楚,但在我看来,您可以在 DataTable.vue
中添加相同的命名插槽:
<template>
<div>
<page-selector/>
<b-table>
<template slot="table-caption"><slot name="table-caption"></slot></template>
....
</b-table>
<pager/>
</div>
</template>
关于vue.js - VueJS - 将插槽和作用域插槽传递给子模板中的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50641220/