inputタグのradio,checkbox,text(etc.), submit,buttonをまとめたvueテンプレート

v-input.vue

<template>
  <div>
    <v-radio v-if="type === 'radio'" />
    <v-checkbox v-else-if="type === 'checkbox'" />
    <v-button v-else-if="type === 'button' || type === 'submit'" />
    <v-text v-else />
  </div>
</template>

<script>

export default {
  components : {
    // -------------------------------------------------------------------------
    // text
    //
    vText : {
      functional : true,
      render(h, ctx) {
        const { parent } = ctx
        return (
          <div class="type-text">
            {
              h('input', {
                attrs : {
                  type : parent.$props.type,
                  ...parent.$attrs
                },
                domProps : {
                  value : parent.$props.modelValue
                },
                on : Object.assign({}, parent.$listeners, {
                  input(e) {
                    parent.$emit('modelEvent', e.target.value, e)
                  }
                })
              })
            }
          </div>
        )
      }
    },
    // -------------------------------------------------------------------------
    // radio
    //
    vRadio : {
      functional : true,
      render(h, ctx) {
        const { parent } = ctx
        return (
          <div class="type-radio">
            {
              h('input', {
                attrs : {
                  type : 'radio',
                  ...parent.$attrs
                },
                domProps : {
                  value : parent.$attrs.value
                },
                on : Object.assign({}, parent.$listeners, {
                  change(e) {
                    parent.$emit('modelEvent', e.target.value, e)
                  }
                })
              })
            }
            <i />
          </div>
        )
      }
    },
    // -------------------------------------------------------------------------
    // checkbox
    //
    vCheckbox : {
      functional : true,
      render(h, ctx) {
        const { parent } = ctx
        return (
          <div class="type-checkbox">
            {
              h('input', {
                attrs : {
                  type    : 'checkbox',
                  checked : parent.$props.modelValue,
                  ...parent.$attrs
                },
                on : Object.assign({}, parent.$listeners, {
                  change(e) {
                    parent.$emit('modelEvent', e.target.checked, e)
                  }
                })
              })
            }
          </div>
        )
      }
    },
    // -------------------------------------------------------------------------
    // button
    //
    vButton : {
      functional : true,
      render(h, ctx) {
        const { parent } = ctx
        // console.log(ctx.parent)
        return (
          <div class="type-button">
            {
              h('input', {
                attrs : {
                  type : parent.$props.type,
                  ...parent.$attrs
                },
                on : Object.assign({}, parent.$listeners, {
                })
              })
            }
          </div>
        )
      }
    }
  },
  inheritAttrs : false,
  model : {
    prop  : 'modelValue',
    event : 'modelEvent'
  },
  props : {
    type       : { type : String, required : true },
    modelValue : { type : [String, Boolean, Number], required : false, default : '' }
  }
}
</script>