Vue - как передать слоты внутри компонента оболочки?

Итак, я создал простой компонент-оболочку с таким шаблоном, как:

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

использование $attrs и $listeners для передачи свойств и событий.
Работает нормально, но как оболочка может передавать <b-table> именованные слоты дочернему элементу?


vue.js components vue-component bootstrap-vue wrapper
person user3599803    schedule 16.06.2018    source источник
comment
К вашему сведению, эта проблема будет решена в этом новом PR. Но если вы хотите найти решение прямо сейчас, этот комментарий на github помог бы. протестировано: jsfiddle.net/jacobgoh101/bptLavov/185   -  person Jacob Goh    schedule 17.06.2018

Ответы (3)


arrow_upward
147
arrow_downward

Vue 3

То же, что и в примере Vue 2.6 ниже, за исключением:

Vue 2.6 (синтаксис v-slot)

Все обычные слоты будут добавлены в слоты с заданной областью действия, поэтому вам нужно сделать только следующее:

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

person Decade Moon    schedule 17.06.2018
comment
Ответ для Vue 2.6 не работает для меня при использовании именованного слота (на vue 2.6.11). Если я удалю части ="scope" и v-bind="scope", он будет работать для именованных слотов, но я больше не смогу использовать его для слотов с ограниченным диапазоном :( - person pooria; 12.06.2021

arrow_upward
82
arrow_downward

Я автоматизировал прохождение любых (и всех) слотов, используя 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>
person Paul Bastowski    schedule 15.10.2018

arrow_upward
3
arrow_downward

Вот обновленный синтаксис для vue ›2.6 со слотами с ограниченной областью действия и обычными слотами, спасибо Никите-Полякову, ссылка на обсуждение

<!-- 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>
person Sergey    schedule 05.02.2021