What’s the best way to build components based on other, smaller base components?

Question

What would really be a good, neat way to build bigger components based on smaller base components that contain the common to all functionalities. Like an interface in the OOP world.

I am trying something like this but it feels hackish.

ReportItem.vue - The base 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 bigger component that shares the same editing and deleting functionality but has more 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>

Is there a better way to do this using mixins or even .extend but allow the template to be customized? Here's a codesandbox link to the code that works right now using this approach - https://codesandbox.io/s/4jmw1l7xow

Answer 1

It's a mixture of everything, but along with mixins you should be using slots - named and scoped in particular.

With the scoped slots you can access children's properties within the scope range and modify rendering based on your requirements. This, along with the named slots, gives you full flexibility of what you want to render. A simple example would be:

// child-component
<div>
  <slot :childInternalProperty="objectInData">
    {{ childInternalProperty.name }}
  </slot>
</div>

// main
<child-component> <!-- will render the name -->
</child-component>

<child-component> <!-- will render "Hello!" -->
  Hello!
</child-component>

<child-component> <!-- will render "Hello {the name} !" -->
  <template slot-scope="slotProps"> <!-- template goes into child-component's slot -->
    Hello {{ slotProps.childInternalProperty.name }}!
  </template>
</child-component>

What you basically do is to customize the child's template from the outside, using child's data.

Hope that helps. Good luck!