[Vue3] v-model props

props는 read-only reactive object입니다.
즉, 조회만 가능한 반응형 객체이며, computed 같은 반응성 체크는 가능하지만 props를 직접 수정하는 것은 불가능합니다.

v-model을 props로 사용해주기 위해서 vue3는 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅해줍니다.

<script setup>
import { ref } from 'vue'

const value = ref()
<script>

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

위의 코드에서 우리는 Child라는 자식 컴포넌트에 v-model을 바인딩(props 사용)해주고 싶습니다. 이 때, 다른 props를 넘겨주는 것처럼 변수값을 넘겨주는 것이 아니라 단순히 v-model을 사용하는 것처럼 그대로 사용해주면 해당 코드는 아래와 같이 컴파일러에 의해 변환됩니다.

<Child
  :modelValue="value"
  @update:modelValue="newValue => value = newValue"
/>

자식 컴포넌트에서는 이를 사용해주기 위해 아래와 같이 구현해주어야 합니다.

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

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

혹은 아래와 같이 computed를 사용해 직접 반응형 객체를 만들어 v-model을 바인딩 할 수도 있습니다.

<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>

참고: https://vuejs.org/guide/components/v-model.html