41 사용자 지정 inputs

source: categories/study/vue-experiance/vue-experiance_9-31.md

41. 사용자 지정 inputs

컴포넌트에서 v-model 사용

사용자 지정 이벤트를 사용하여 v-model과 함께 작동하는 사용자 지정 입력을 생성할 수도 있습니다.

<input v-model="searchText">

위와 아래는 같은 작업을 수행합니다.

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

컴포넌트에서 사용될 때는 v-model은 다음과 같은 역할을 수행합니다.

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

커스텀 컴포넌트의 위와 같은 동작을 위해서 컴포넌트 안에 있는 input 요소는 반드시 다음과 같은 역할을 수행해야됩니다.

• value 속성을 value prop에 바인드해야됩니다.
• input 태그에서 커스텀 input 이벤트를 새 값과 함께 emit해야됩니다.

아래는 예시입니다.

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

위와 같이 작성하면 커스텀 컴포넌트에서 v-model이 완벽하게 작동할 것입니다.

<custom-input v-model="searchText"></custom-input>

지금은 이것이 사용자 컴포넌트 이벤트에 대해 알아야할 전부입니다.
그러나 이 페이지를 다 읽고 내용에 익숙해지면 나중에 다시 돌아와 사용자 정의 이베늩에 대한 전체 가이드를 읽는 것이 좋습니다.