Как передать компонент из родительского дочернему?

Question

[AspMaster]

У меня есть компонент главной страницы. На этой странице я хочу отобразить таблицу с данными. Я создал универсальный компонент таблицы , который я бы хотел использовать и на других страницах. Однако на других страницах мне надо будет отображать другие объекты, соответственно число колонок, их названия будут меняться. Для этого я решил создать компонент строки для каждого используемого типа , но как я могу отправить компоненту таблицы компонент строки, который мне надо в этот раз отобразить ?

Comments

[Михаил]

слоты?

Answer 1

[Mr. Grump]

Используйте систему слотов:

В компоненте таблицы:

...
<tr v-for="row in rows">
  <td v-for="header in headers">
    <slot :name="`cel_${header.key}`" :row="row"> {{ row[header.key] }} </slot>
  </td>
</tr>
...

Использование компонента таблицы:

...
<table-component :rows="users" :headers="headers">
  <template slot="cel_full_name" slot-scope="props">
    <router-link :to="`/user/${props.row.id}`">{{ props.row.full_name }}</router-link>
  </template>
</table-component>
...