Vue.js Vue 如何在包装器组件中传递插槽

Vue 3

与下面的Vue 2.6示例相同，只是:

• $listeners已合并为$attrs，因此不再需要v-on="$listeners".看migration guide.
• $scopedSlots现在只有$slots.见migration guide.

Vue 2.6 (v-slot syntax)

所有普通插槽都将添加到作用域插槽中，因此您只需执行以下操作:

<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

见Paul's answer.

Original answer

您需要这样指定插槽:

<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 function

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.