VueJs: Pass Dynamic Components as props to another Component and render them

Viewed 7214

I am trying to build a table component.

I want to define and pass the column metadata for the grid as an array prop and also pass the actual data as another prop to the grid.

I was able to achieve that without many issues.

But, now I would like to pass a dynamic component as a part of each column definition so that the user can define/control the way the cell gets rendered (content with edit delete buttons in same cell etc.)

Is there a way to pass a dynamic component as a prop and then have this component rendered?

<parent-comp>
  <tr class="" v-for="result in dataSource">
    <template v-for="column in columns">
      <td>
        <template v-if="column.customComponent">
          ######## How do I render this customComponent ########
        </template>
      </td>
    </template>
  </tr>
</parent-comp>

where the dataSource data can be something like

[
  columns: [{
    name: "something",
    customComponent: SomeCustomComponent
  }, {
    name: "another thing",
    customComponent: AnotherOtherCustomComponent
  }]
]

Will be happy to elaborate/clarify on this if the ask above is not clear.

1 Answers
Related