[Vue.js] v-model과 defineModel 함수로 부모 자식 간 데이터 전달

• 이 코드는 Vue 3.3부터 지원되는 defineModel()을 사용한 부모-자식 간 양방향 바인딩(v-model) 예제입니다.

• 아래에 두 컴포넌트를 기반으로 정확하게 어떻게 동작하는지 시각적으로 설명드릴게요.

✅ 1. 전체 구조 요약

Parent.vue      <-- 부모에서 v-model="title"
   ↓
Comp.vue        <-- 자식에서 defineModel() 사용

✅ 부모 컴포넌트 (Parent.vue)

<script setup>
import { ref } from 'vue';
import Comp from './Comp.vue';

let title = ref('title'); // 반응형 상태
</script>

<template>
  <h1>{{ title }}</h1>       <!-- 현재 상태 확인 -->
  <Comp v-model="title" />  <!-- 자식 컴포넌트와 양방향 바인딩 -->
</template>

💡 여기서 핵심

• v-model="title"은 다음과 같이 번역됩니다:

<Comp :modelValue="title" @update:modelValue="title = $event" />

✅ 자식 컴포넌트 (Comp.vue)

<script setup>
const model = defineModel(); // modelValue + emit을 자동으로 처리해줌
</script>

<template>
  <h2>{{ model }}</h2>
  <p>inputText: {{ model }}</p>
  <input
    type="text"
    v-model="model"  <!-- 자식에서 직접 v-model로 바인딩 -->
  />
</template>

💡 여기서 핵심

• defineModel()은 props('modelValue')와 emit('update:modelValue')를 자동으로 처리

• model은 ref처럼 반응형이므로 .value 접근 필요 (스크립트 내부에서)

• 템플릿 안에서는 model 그대로 사용 가능 (.value 생략 가능)

✅ 실행 흐름 정리

1. 부모에서 title 값은 'title'

2. 부모는 <Comp v-model="title" />로 자식에게 전달

3. 자식은 defineModel()로 부모의 값을 model로 받고,

4. <input v-model="model" />으로 입력 시 model이 변경

5. 변경된 값이 자동으로 부모의 title에 반영됨

✅ 시각화

입력값 변경 (자식 input)
  ↓
model 값 변경 (자식)
  ↓
update:modelValue 발생
  ↓
부모의 title 값 업데이트
  ↓
<h1>{{ title }}</h1> 반응형으로 갱신

✅ 요약