Maximizing Component Flexibility

Vue.js components take props and slots as input; their output is rendered as HTML and emitted events.

To maximize component flexibility, it always makes sense to leverage slots and props.

Leveraging props and default values judiciously means a component can be reused and extended. For example, instead of hardcoding a value in the component, we could set it as a default prop. In this case, date defaults to the current date, new Date(). We then extract the epoch using a computed property:

<template>
  <div>Date as epoch: {{ epoch }}</div>
</template>
<script>
export default {
  props: {
    date: {
      type: Date,
      default() {
        return new Date()
      }
    }
  },
  computed: {
   ...