Vue.js pass data from slot to component instance

Viewed 93

I want to pass just a part of the data to instance component. For instance, I have table component and a cell slot (e.g.name), I want to pass the cell value to the instance and override it in the instance.

1 Answers

if we have a slot like this in our table component getting data as prop:

<slot name="name-cell" :name="row.name">
    {{row.name}}
</slot>

Scoped-slots are what you need.

We can change the title in the instance like this:

<table :data="data">
    <template #name-cell="{name}">
        This is {{name.toUpperCase()}}
    </template>
</table>

Therefore in the instance component you will see this is JACK instead of Jack as name cell.

Related