Vue Transparent Wrapper Component

<BaseInput
  placeholder="Waht's your name?"
  @focus="doSomething"
/>

<template>
  <label>
    {{ label }}
    <input
      V-bind="$attrs"
      :value="value"
      v-on="listeners"
    ></input>
  </label>
</template>
<script>
export default {
  inheritAttrs: false,
  computed: {
    listeners() {
      return {
        ...this.$listeners
        input:event =>
          this.$emit('input', event.target.value)
      }
    }
  }
}
</script>

[Vuejs] 숨겨진 Vue 패턴들

template 안에 root element 가 하나 있어야만 하는데, 사실 가끔 이게 불필요하게 느껴진다. 괜히 div로 감싸기도 좀 찝찝했는데, functional component 를 이용해서 처리하는 방법이 있다. 주의 할 부분은 @focus 부분에 .native를 붙이지 말아야 한다. (자식 컴포넌트에서 $listeners 로 전달 받지 못한다)...

https://dongmin-jang.medium.com/vuejs-%EC%88%A8%EA%B2%A8%EC%A7%84-vue-%ED%8C%A8%ED%84%B4%EB%93%A4-1ea3adc585ac