[Vue3] Child Component에 v-model 사용하기

vue2에서 model속성에 prop, event 정의해서 구현했던 Component 2-way-binding 방식이

vue3에서 Component v-model로 편리하게 구현 가능하게 되었습니다.

Child 컴포넌트와 Parent 컴포넌트 정의를 각각 보겠습니다.

Options API로 설명하겠습니다.

 

Child 컴포넌트

정의된 prop과 emit을 구현하면 되는데 바로 'modelValue' prop & 'update:modelValue' emit 입니다.

<template>
  <div>
    <label for="">Child : </label>
    <input
      type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],	
};
</script>

 

:value, @input을 정의하여 지정한 prop과 emit을 연결시킵니다.

data의 in - out을 결정했습니다.

여기서는 부모 컴포넌트가 input 값을 받아야하기 때문에 emit함수 2번째 인자에 input 값을 넘겨주고 있습니다.

 

부모컴포넌트

<template>
  <!-- v-model 사용 -->
  <!-- :modelValue="title" @update:modelValue="(value) => title = value" -->
  <VModelExamChild v-model="title"></VModelExamChild>
  <label for="">Parent : </label>
  <span>{{ title }}</span>
</template>

<script>
import VModelExamChild from '@/components/VModelExamChild.vue';
export default {
  data() {
    return {
      title: '',
    };
  },
  components: {
    VModelExamChild,
  },
};
</script>

어떤가요? v-model="title" 하나만 으로 자식 컴포넌트와 2-way-binding이 완료됩니다. 엄청 간편해졌죠? ㅎㅎ

input 요소에 v-model 구현 방식이 :value 속성과, @input 이벤트를 활용해서 구현되었다는 사실을 인지하고

비교 해봅시다.

컴포넌트에서는 :modelValue 속성과 @update:modelValue 이벤트를 통해서 2-way-binding 구현이 가능하며,

축약 표현으로 v-model을 쓰면 Component v-model이 완성됩니다.

 

결과

컴포넌트 2-way 바인딩

 

위 예시에서 v-model만 지정해줘도 되는 이유는

modelValue와 update:modelValue를 v-moel의 기본 Argument로 가지고 있기 때문입니다.

directive argument 예시

이 말씀을 드리는 이유는 Argument를 변경만하면 컴포넌트 Prop명을 다르게 지정해줘도 된다는 거죠!

바로 예시를 보겠습니다.

 

자식 prop, emit 정의

// VModelExamChild
props: {
    title: String,
  },
emits: ['update:title'],	// 'update:' prefix 필요

부모 v-model, argument 지정

<VModelExamChild v-model:title="title"></VModelExamChild>

이렇게 원하는 이름으로도 Component v-model 구현이 가능합니다!

이상입니다.

 

 

 

 

참고자료

https://v3-migration.vuejs.org/breaking-changes/v-model.html

v-model | Vue 3 Migration Guide