VueJs: Render a component inside another with scoped slots

[inNetto]

1. [VueJs] The challange is: As we built in issue Vue: Custom table reusable component #7, we need to improve our table to receive any html element inside our table in a new cell. For example: Our table just render the columns and data (th/td). But if the parent component needs the table render a edit button, or a delete or any html element else? If we define a button html inside the table, every table parent will render the button and that certainly is not the expected behavior if we are talking about a custom reusable table.

We can use scoped slot to implement our challange. Table define a named slot and the parent component just implement this named slot inside tag. Take a lock forward

The name of the slot is "actions" and needs to be used with the same name in parent component

As a scoped slot, the table pass a data inside the slot and then the parent can use this value inside his own template, not a global value. For more, take a look at entire solution on commit.