How to pass a component from parent to child?

Question

Vue.js

I have a homepage component. On this page I want to display a table with data. I have created a generic table component that I would like to use on other pages as well. However, on other pages, I will need to display other objects, respectively, the number of columns, their names will change. To do this, I decided to create a row component for each type used, but how can I send the row component that I need to display this time to the table component?

Answer 1

Use the slot system:
In the table component:

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

Using the table component:

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