v-switch component

v-switch.vue

<!-- File: `v-switch.vue` -->
<script>
export default {
  functional: true,
  props: {
    value: { type: [String, Number], required: true }
  },
  render(h, { data, props, scopedSlots }) {
    const { value } = props
    const slotFn = value in scopedSlots ? scopedSlots[value] : scopedSlots.default

    return slotFn ? slotFn(data.attrs) : null
  }
}
</script>

<!-- Usage as follows: -->

<template>
  <div>
    <v-switch :value="headingType">
      <template #big>
        <h1>Headline</h1>
      </template>
      <template #small>
        <h2>Headline</h2>
      </template>
      <template #smaller>
        <h3>Headline</h3>
      </template>
      <!-- Optional: `<template #default></template>` -->
    </v-switch>
  </div>
</template>