Vue-如何向下传递包装器组件内的插槽? [英] Vue - how to pass down slots inside wrapper component?

问题描述

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

So I've created a simple wrapper component with template like:

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

使用$attrs和$listeners传递道具和事件.
工作正常，但是包装程序如何将<b-table>命名的插槽代理到子级?

using $attrs and $listeners to pass down props and events.
Works fine, but how can the wrapper proxy the <b-table> named slots to the child?

推荐答案

Vue 2.6(v槽语法)

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

All ordinary slots will be added to scoped slots, so you only need to do this:

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

You probably also want to set inheritAttrs to false on the component.

这篇关于Vue-如何向下传递包装器组件内的插槽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！