Is there a more elegant approach to constructing larger components from smaller base components that encompass common functionalities, akin to an interface in the OOP realm?
I'm experimenting with this concept, but it feels somewhat inelegant.
ReportItem.vue - The foundational component
<template>
<div class="report-item">
<div class="report-item__actions">
<button @click="onEdit" type="button">Edit</button>
<button @click="onDelete" type="button">Delete</button>
</div>
<div class="report-item__content">
<slot></slot>
</div>
</div>
</template>
<script>
import '../styles/_report-item.css';
export default {
name: 'report-item',
props: {
data: Object,
type: String,
},
methods: {
onEdit() {
console.log("Editing...")
},
onDelete() {
console.log("Deleted");
}
}
}
</script>
ReportItemText - the extended component that inherits the editing and deleting functionalities while adding additional content.
<template>
<report-item class="report-item--title">
<h4>{{title}}</h4>
</report-item>
</template>
<script>
import ReportItem from './ReportItem';
export default {
name: 'report-item-title',
components: {ReportItem},
data() {
return {
title: 'Report Title'
}
}
}
</script>
Could mixins or .extend offer a more robust solution while still allowing for template customization? Here is a link to a codesandbox illustrating the current implementation using this methodology - https://codesandbox.io/s/4jmw1l7xow