[Vue3] v-model props로 사용하기: modelValue

컴포넌트의 props로 v-model을 사용하는 방법을 알아봅니다.

Vue3

Props은 readOnly reactive object임

즉 computed 등으로 반응성 체킹은 가능하지만 props를 직접 수정할 수는 없음

우회 방법 : modelValue

https://vuejs.org/guide/components/events.html#usage-with-v-model

Component Events | Vue.js

놀랍게도 Vue3은 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 이를 해결함

 

즉 아래와 같은 소스코드는

 <Comp v-model="first"/>

아래와 같이 컴파일러에 의해 변환됨.

<Comp
  :modelValue="first"
  @update:modelValue="newValue => first = newValue"
/>

자식 컴포넌트에서는 이를 대비한 구현을 해줘야 함

<script setup>
import {computed} from 'vue';
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

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

참고 : 아래와 같이 구현하는 것도 가능함. 뭔가 리코일 같은 느낌

<!-- CustomInput.vue -->
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

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

직접 실행해보기

반응형