我正在尝试将插槽传递到插槽中,但是需要向下传递插槽的子组件看不到它。
在子级(TheTable)中,我具有来自Vue核心UI(CDataTable)的表组件,该组件需要我要从父级传递的某些插槽:
<CDataTable
class="overflow-auto"
:items="this.items"
:fields="fieldData"
:sorter="{ external: true, resetable: true }"
:sorter-value="this.sorterValue"
:table-filter="{ external: true, lazy: false, placeholder: 'Enter here', label: 'Search:'}"
:responsive="false"
:loading="this.loading"
:hover="true"
:items-per-page-select="true"
:items-per-page="this.perPage"
@pagination-change="paginationChanged"
@update:sorter-value="sorterUpdated"
@update:table-filter-value="filterUpdated"
>
<slot name="requiredTableFields"></slot>
</CDataTable>
在父组件中,我有:
<TheTable
v-bind:fields="fields"
v-bind:endpoint-url="endpointUrl"
>
<template slot="requiredTableFields">
<td slot="name" slot-scope="{item}">
<div>{{ item['attributes.email'] }}</div>
<div class="small text-muted">
{{ item['attributes.firstname'] }} {{ item['attributes.lastname'] }}
</div>
</td>
<td slot="registered" slot-scope="{item}">
<template v-if="item['attributes.created_at']">{{ item['attributes.created_at'] }}</template>
<template v-else>Not setup yet</template>
</td>
</template>
</TheTable>
有什么办法可以使它工作? 干杯, 卡斯珀
答案 0 :(得分:2)
将基础插槽合并到一个requiredTableFields
插槽中将无法正常工作,因为没有(简单)的方法可以在子插槽合并后将其拆分出来。
相反,您可以仅将插槽分开:
<TheTable ...>
<template v-slot:name="{ item }">
<td>
...
</td>
</template >
<template v-slot:registered="{ item }">
<td>
...
</td>
</template>
</TheTable>
这会将两个作用域内的插槽name
和registered
传递到TheTable
。
假设您不想将插槽名称硬编码为TheTable
,则需要遍历$scopedSlots
以动态包含它们。
<CDataTable ...>
<template v-for="(x, slotName) in $scopedSlots" v-slot:[slotName]="context">
<slot :name="slotName" v-bind="context" />
</template>
</CDataTable>
一些注意事项:
x
未使用,我们只需要遍历插槽名称即可。context
,并被继续传递。$slots
,并删除所有引用context
的部分。:
属性的开头有一个:name
,因为我们要传递动态名称。不幸的是,原始问题中的一个空位也被称为name
,这可能在这里引起一些混乱。v-bind="context"
部分类似于JavaScript Spread运算符,如果可以使它更清晰的话。将其视为attributes = { name: slotName, ...context }
。下面是说明上述技术的完整示例。它不使用CDataTable
,但传递插槽的核心原理是完全相同的。
const Comp2 = {
template: `
<div>
<h4>Left</h4>
<div><slot name="top" item="Red" /></div>
<h4>Right</h4>
<div><slot name="bottom" item="Green" /></div>
</div>
`
}
const Comp1 = {
template: `
<div>
<comp2>
<template v-for="(x, slotName) in $scopedSlots" v-slot:[slotName]="context">
<slot :name="slotName" v-bind="context" />
</template>
</comp2>
</div>
`,
components: {
Comp2
}
}
new Vue({
el: '#app',
components: {
Comp1
}
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<div id="app">
<comp1>
<template v-slot:top="{ item }">
<button>Slot 1 - {{ item }}</button>
</template>
<template v-slot:bottom="{ item }">
<button>Slot 2 - {{ item }}</button>
</template>
</comp1>
</div>