Within a vuejs application, there exist three components - TopClicks.vue, TopImpressions.vue, TopCtr.vue. Each of these components utilizes vue-good-table for rendering a similar table with varying sorting techniques:
../components/TopClicked.vue (around 200 lines)
<template>
<div class="top-clicked">
<vue-good-table
mode="remote"
@on-page-change="onPageChange"
@on-sort-change="onSortChange"
:sort-options="{
enabled: true,
initialSortBy: {field: 'clicks', type: 'desc'}
}"
...
>
<template slot="table-row" slot-scope="props">
<template v-if="props.column.field === 'keyword'">
...
</template>
<template v-else-if="props.column.field === 'clicks'">
...
</template>
<template v-else-if="props.column.field === 'impressions'">
...
</template>
...
</template>
<template slot="loadingContent">
<span class="vgt-loading__content">
...
</span>
</template>
<template slot="emptystate">
...
</template>
</vue-good-table>
</div>
</template>
<script>
import { VueGoodTable } from 'vue-good-table';
export default {
name: 'TopClicked',
components: { VueGoodTable},
data() {
return {
columns: [
{
label: this.$t('keyword'),
field: 'keyword',
},
{
label: this.$t('clicks'),
field: 'clicks',
},
... more columns
],
};
},
};
</script>
The other two components - TopImpressions.vue and TopCtr.vue are nearly identical, except for the different values passed to the :sort-options parameter.
The main query at hand is: How can the code be structured to avoid redundant changes in the props or slot templates of the vue-good-table component? What should a component look like that passes default props and slots to another component, while allowing for override when necessary?
It would be beneficial if instead of duplicating the aforementioned 200 lines of code, a child component (with base properties and slot templates) could be created and utilized as shown below
<vue-good-table-child
// intended to override the default :sort-options in vue-good-table-child
:sort-options="{
enabled: true,
initialSortBy: {field: 'impressions', type: 'desc'}
}"
>
// meant to override the default named slot "loadingContent" in vue-good-table-child
<template slot="loadingContent">
...
</template>
</vue-good-table-child>
This approach ensures that common code remains in a base component, with only distinct props (or slot templates) being passed to the child component.