Vue - 如何在包装器组件中传递插槽?

2022-01-21 00:00:00 wrapper components vue.js vue-component bootstrap-vue

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

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 3

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

Same as the Vue 2.6 example below except:

  • $listeners 已合并到 $attrs 中，因此不再需要 v-on=$listeners".请参阅迁移指南.
  • $scopedSlots 现在只是 $slots.请参阅迁移指南.
  • $listeners has been merged into $attrs so v-on="$listeners" is no longer necessary. See the migration guide.
  • $scopedSlots is now just $slots. See migration guide.

Vue 2.6(v-slot 语法)

所有普通槽都会被添加到作用域槽中，所以你只需要这样做:

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

请参阅 保罗的回答.

原答案

您需要像这样指定插槽:

You need to specify the slots like this:

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

相关文章