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: {
...
