Vue-如何在包装器组件内部传递槽？

因此，我创建了一个简单的包装器组件，其模板如下:

<wrapper>
<b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>

使用 $attrs和 $listeners来传递道具和事件。
工作良好，但是包装器代理如何将 <b-table>命名槽传递给子节点呢？

30144 次浏览
小开
最佳答案

Vue 3

与下面的 Vue 2.6示例相同，除了:

  • $listeners已经合并到 $attrs中，因此不再需要 v-on="$listeners"。参见 迁徙指南。
  • $scopedSlots现在只是 $slots参见 迁徙指南。

Vue 2.6(v- 插槽语法)

所有普通插槽都将添加到有作用域的插槽中，因此您只需要这样做:

<wrapper>
<b-table v-bind="$attrs" v-on="$listeners">
<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>
</b-table>
</wrapper>

Vue 2.5

参见 保罗的回答。

原始答案

您需要像下面这样指定插槽:

<wrapper>
<b-table v-bind="$attrs" v-on="$listeners">
<!-- Pass on the default slot -->
<slot/>


<!-- Pass on any named slots -->
<slot name="foo" slot="foo"/>
<slot name="bar" slot="bar"/>


<!-- Pass on any scoped slots -->
<template slot="baz" slot-scope="scope"><slot name="baz" v-bind="scope"/></template>
</b-table>
</wrapper>

渲染功能

render(h) {
const children = Object.keys(this.$slots).map(slot => h('template', { slot }, this.$slots[slot]))
return h('wrapper', [
h('b-table', {
attrs: this.$attrs,
on: this.$listeners,
scopedSlots: this.$scopedSlots,
}, children)
])
}

您可能还希望在组件上将 inheritAttrs设置为 false。

小开

我一直在使用 v-for自动传递任何(和所有)插槽，如下所示。这个方法的好处是，您不需要知道必须传递哪些槽，包括默认槽。传递给包装器的任何插槽都将被传递。

<wrapper>
<b-table v-bind="$attrs" v-on="$listeners">


<!-- Pass on all named slots -->
<slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>


<!-- Pass on all scoped slots -->
<template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope"><slot :name="slot" v-bind="scope"/></template>


</b-table>
</wrapper>
小开

下面是 vue > 2.6的更新语法，带有作用域插槽和常规插槽，感谢 Nikita-Polyakov，与讨论有关的链接

<!-- pass through scoped slots -->
<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
<slot :name="scopedSlotName" v-bind="slotData" />
</template>


<!-- pass through normal slots -->
<template v-for="(_, slotName) in $slots" v-slot:[slotName]>
<slot :name="slotName" />
</template>


<!-- after iterating over slots and scopedSlots, you can customize them like this -->
<template v-slot:overrideExample>
<slot name="overrideExample" />
<span>This text content goes to overrideExample slot</span>
</template>
小开

Vue 3.2及以上版本的解决方案

<template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope || {}" />
</template>

提交答案