Передать в дочерний компонент неопределённые слоты VueJS

Question

Мои попытки: родительский компонент

<table-limit-data
      id="news-articles-list-table"
      :fields="fields"            
      >
       <template #name>
         <h3 >Заголовок статьи</h3>
       </template>
 </table-limit-data>

базовый компонент таблицы

  <b-table
          :id="id"
          :items="dataTable"
          :fields="fields"
          v-bind="$attrs" 
          v-on="$listeners"
         >
        <template v-for="(_, slot) of $scopedSlots"  #cell(slot)="scope"  >
          <slot :name="slot" v-bind="scope"/>
        </template>

   </b-table>

Не работает, судя по всему $scopedSlots пустой...

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

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

  <template v-slot:cell(preview.image)="data">
     <img :src="data.value"/>
  </template>

  // preview.image - имя ключа столбца таблицы

Но как мне это делать только в родительском компоненте, а не базовом.

Answer 1

Хм, всё таки смог.

В базовом:

  <b-table
          :id="id"
          :items="dataTable"
          :fields="fields"
  >
    <template v-for="slotName in Object.keys($scopedSlots)" 
      v-slot:[slotName]="slotScope">
      <slot :name="slotName" v-bind="slotScope"></slot>
    </template>

   </b-table>

В родительском:

<table-limit-data
        id="news-articles-list-table"
        :fields="fields"      
>    
  <template v-slot:cell(preview.image)="data">
      <img :src="data.value" />
  </template>
</table-limit-data>

БЛОГ НА HUSL

Передать в дочерний компонент неопределённые слоты VueJS

Ответы (1 шт):