Используйте именованные слоты внутри компонента grand-child

Question

Я создал глобальные компоненты, расширяющие компонент Bootstrap Vue Table для создания собственного шаблона для каждой таблицы с именем VTable.

Компонент Bootstrap Vue Table имеет возможность использовать именованные слоты для настройки рендеринга данных.

<template>
  <div>
    <b-table
      :items="items"
      :fields="fields"
      ...
    >
    </b-table>
  </div>
</template>

<script>
  import Table from 'bootstrap-vue/es/components/table/table';

  export default {
    name: 'Vtable',
    extends: Table,
    ...
  };
</script>

Я использую компонент глобальной таблицы внутри другого, используя новый пользовательский тег HTML.

<v-table
  v-if="items"
  :items="items"
  :fields="fields"
  ...
>
  <template
    slot="timestamp"
    slot-scope="data"
  >
    ...
  </template>
  <template
    slot="row-details"
    slot-scope="row"
  >
    ...
  </template>
</v-table>

Проблема в том, что именованные слоты, используемые в компоненте VTable, не отображаются внутри дочернего компонента.

Я также пытался создать произвольно именованный слот внутри глобального компонента

<template>
  <div>
    <b-table
      ...
    >
      <slot name="customRendering"/>
    </b-table>
  </div>
</template>

И используйте это как

<v-table
  ...
>
  <template slot="customRendering">
    <template
      slot="timestamp"
      slot-scope="data"
    >
      ...
    </template>
    <template
      slot="row-details"
      slot-scope="row"
    >
       ...
    </template>
  </template>
</v-table>

Без успеха

Можно просто использовать именованные слоты, определенные внутри компонента grand-child, или это вообще невозможно? Я также думаю, что нужно перебрать значение customRendering для динамического воссоздания слотов таблицы Bootstrap Vue.

Answer 1

В вашем vtable компоненте вы можете определить слоты, которые хотите передать.

так что если у вас есть компонент my-component с дочерним элементом -> vtable, который расширяется -> btable ...

вы можете определить слоты в вашем vtable компоненте, который вы хотите передать, используя

<template
  slot="row-details"
  slot-scope="row"
>
    <slot name="row-details"/>
</template>

вот краткий пример этого https://jsfiddle.net/eywraw8t/308324/

Возможно, вам придется настроить это для каждого слота. Если вы хотите передать их все динамически (не зная их имен), функция рендеринга будет работать лучше, поскольку вы можете перебрать все слоты, отправленные родителем, и передать их дочернему элементу.

документы: https://vuejs.org/v2/guide/render-function.html#Slots

пример компонента с функцией рендеринга, который будет пропускать выделенные слоты

const Bar = Vue.component('vtable', {
  render(h) {
    const children = Object.keys(this.$slots).map(slot => h('template', { slot }, this.$slots[slot]))
    return h('wrapper', [
      h('foo', {
        attrs: this.$attrs,
        on: this.$listeners,
        scopedSlots: this.$scopedSlots,
      }, children)
    ])
  }
});