[Vue3] defineModel

소개

Vue에서는 데이터 흐름 관리를 위해 props와 emit를 이용한 방식이 널리 사용되어 왔습니다. 그러나 최근에 나온 Vue3.4에서는 defineModel 방식을 권장하고 있습니다.

 

- props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용

 

- emit

부모 컴포넌트로 데이터를 전달

 

defineModel 이전의 방식

<!-- 자식 컴포넌트 -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

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

 

<!-- 부모 컴포넌트 -->
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

 

이러한 방식은 간단하고 직관적이지만, 데이터 흐름이 복잡해지거나 중첩된 컴포넌트 구조에서는 유지보수가 어려울 수 있습니다.

 

- defineModel 설명

1. Vue 3.4부터는 권장하는 방식
2. 반환되는 값은 ref이며, 다른 ref처럼 접근하고 변경할 수 있지만, 부모 값과 로컬 값 사이의 양방향 바인딩응로 작동 (즉, 작성에 의해 변경되면 부모 바인딩 값도 업데이트가 된다)

- defineModel 사용방법

<script setup>
import { defineModel } from "vue";

const title = defineModel('title');
</script>

<template>
  <input type="text" v-model="title" />
</template>

 

- defineModel arguments

const [model, modifiers] = defineModel();

// v-model을 필수로 만들기
const model = defineModel({ required: true });

// 기본값 제공
const model = defineModel({ default: 0 });

// 타입 설정
const model = defineModel({ type: String });

// 로컬 변수로 설정하여 부모로부터 전달되지 않아도 사용할 수 있음.
const model = defineModel({ local: true });

// 첫 번째 매개변수에 이름, 두번째 매개변수에 설정값을 추가 
const model = defineModel('model', { required: true });

 

- Multiple bindings

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>