如何从槽返回值?Vuejs



vue-bootstrap有一个表,它的列可以通过模板设置。但事实是这个模板本身的数据是从JSON中获取的,所以我不知道如何制作一个将返回值的槽?

示例表模板:

<b-table
:items="data"
:fields="fields"
class="mb-0"
>
<template #cell(partners_total)="data">
<span class="text-nowrap" v-if="data.item.hash">{{ data.item.hash }}</span>
</template>
<template #cell(income)="data">
<span class="text-nowrap" v-if="data.item.hash">{{ data.item.hash }} QDT</span>
</template>

</b-table>

可以看到,#cell(income)="data"据我所知,它是一个槽,但它返回内部的值:items="data"

它是如何实现的我不能理解?

数据举例:

transactions: [
{
id: "hash",
hash: "1643898128736718972368179623a6e6b"
},
{
id: "income",
hash: "1643898128736718972368179623a6e6b"
},
{
id: "partners_total",
hash: "1643898128736718972368179623a6e6b"
}
],

绑定要发送到插槽的数据

父组件

<div>
<v-slot :data="data" />
</div>

在使用组件时访问

子组件

<v-slot="{data}">
...
</slot>

相关内容

  • 没有找到相关文章

最新更新