v-model, defineModel()

v-model은 컴포넌트에서 양방향 바인딩을 구현하는 데 사용됩니다. Vue 3.3-까지는 v-model을 수동으로 설정해야 했지만, Vue 3.4+부터는 이를 보다 간단히 구현할 수 있도록 defineModel() 매크로가 추가되었습니다.

예시: Vue 3.4+ defineModel() 활용

<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

<aside> 💡

• 예시: Vue 3.3- 이하 </aside>

부모 컴포넌트에서는 v-model을 사용해 값을 바인딩할 수 있습니다:

<!-- Parent.vue -->
<Child v-model="countModel" />

defineModel()로 반환되는 값은 ref로, 부모와 자식 간에 양방향 바인딩을 가능하게 해줍니다. 이 ref는 다음과 같은 특징이 있습니다:

• .value가 부모의 v-model 값과 자동으로 동기화됩니다.
• 자식 컴포넌트에서 이 ref 값을 변경하면 부모의 값도 함께 업데이트됩니다.

그래서 이 ref를 native input 요소와 v-model로 연결하면, 자식 컴포넌트가 마치 부모의 v-model처럼 동작하게 되어 쉽게 양방향 바인딩을 구현할 수 있습니다.

이렇게 하면, 자식 컴포넌트가 부모의 데이터를 손쉽게 읽고 쓸 수 있습니다.

<!-- CustomInput.vue -->
<script setup>
const model = defineModel()
</script>

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

실습 - defineModel()

• src/components/BaseInput.vue
• src/App.vue

defineModel() 파라미터