I've created a component based on <v-data-table>
.
<!-- DataTable.vue -->
<template>
<v-card outlined>
<v-data-table
v-bind="$attrs"
v-on="$listeners"
dense
>
<template
v-for="(_, name) in $scopedSlots"
#[name]="slotData"
>
<slot
:name="name"
v-bind="slotData"
></slot>
</template>
<v-data-table>
<v-card>
</template>
I was wondering, why if I add this
<!-- Relevant code snippet -->
<slot
:name="name"
v-bind="slotData"
>
DEFAULT RENDER
</slot>
and use my custom component
<!-- UsersDataTable.vue -->
<template>
<DataTable
:headers="headers"
:items="users"
></DataTable>
</template>
result looks like this
and not like this?
Edit #1
Better discussed here.
Default slot content is used only if parent component does not provide the content for that slot. But since your slot is defined for each slot content provided by the parent the content always exists and default is never used
Edit (after question edit): On the other side, if you do not pass any slot content into your CustomDataTable
(last code example), $scopedSlots
is empty, v-for
is not executed, no slot content is passed into v-data-table
and it uses default rendering...