I have a unique and specific inquiry regarding Vue3, slots, and the components I've developed for a reusable table setup.
CustomTable.vue
<template>
<table>
<thead>
<slot renderAs="header"></slot>
</thead>
<tbody>
<tr v-for="(row, index) of rows" :key="index">
<slot renderAs="cell" :row="row"></slot>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
const rows = [{
name: "Row 1",
col2: "XX",
col3: "YY"
},
{
name: "Row 2",
col2: "XX",
col3: "YY"
},
{
name: "Row 3",
col2: "XX",
col3: "YY"
}];
</script>
CustomTableColumn.vue
<template>
<th v-if="props.renderAs === 'header'" class="p-2">
<slot name="header" :header="props.header">
{{ props.header }}
</slot>
</th>
<td v-else-if="props.renderAs === 'cell'" class="p-2">
<slot :value="props.property ? row[props.property] : row">
{{ props.property ? row[props.property] : "" }}
</slot>
</td>
</template>
<script setup lang="ts">
const props = defineProps<{
renderAs?: string;
header?: string;
property?: string;
row?: any;
}>();
</script>
In this implementation, CustomTableColumn can be displayed in either header or cell format.
Implementation Example
<CustomTable v-slot="slotProps">
<CustomTableColumn v-bind="slotProps" header="Column 1" property="name" v-slot="cellProps"&...
Inquiry: I notice that I am passing down slotProps from CustomTable to CustomTableColumn. Is there a way to eliminate this step and pass them implicitly?