Vue - Component에서 v-model 사용하는 방법

Vue에서는 v-model을 이용해서 양방향 바인딩을 할 수 있는 장점이 있습니다.

v-model 기본 사용법

기본적으로 아래와 같이 v-model을 이용해서 양방향 바인딩을 할 수 있습니다.

<input v-model="name" type="text" placeHolder="이름을 입력하세요"/>

 

Vue 양방향 바인딩 v-model

컴포넌트에서 v-model 사용하기

v-model 은 기본적으로 modelValue를 prop으로 사용하고 update:modelValue를 이벤트로 사용합니다.

아래와 같이 사용하면 양방향 바인딩이 가능합니다.

<BaseInput
  :modelValue="name"
  @update:modelValue="value => name = value"
/>

 

BaseInput.vue

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

 

하지만, 매번 props를 통해서 값을 내려주고, emit을 이용해서 값을 올려주는 과정을 거치면 번거롭습니다.

그래서 computed를 이용해서 v-model를 사용하는 방법이 있습니다.

 

Computed를 이용해서 v-model 구현하기

BaseInput.vue

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

 

또 위와 같은 패턴은 컴포넌트에서 많이 사용하는 개념으로 mixin으로 빼서 사용하셔도 간결하고 좋습니다.

 

mixins/model.js

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}

 

BaseInput.vue

<script>
import model from './model.js'

export default {
  mixins: [model]
}
</script>

<template>
  <input v-model="value"/>
</template>