[Vue3] Component v-model

Component v-model를 활용하면 양방향 props를 사용할 수 있다.

<!-- MainComponent.vue -->
<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

const title = ref('v-model argument example')
</script>

<template>
  <h1>{{ title }}</h1>
  <MyComponent v-model:title="title" />
</template>

<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

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

MainComponent에서 v-model:title로 전달하는 값을
MyComponent에서 :value="title"로 바인딩하고,
@input="$emit('update:title', $event.target.value)"를 이용하여 상위 컴포넌트로 update 이벤트를 보낼 수 있다.

해당 로직을 이용할 경우 props로 넘겨준 데이터를 상위 컴포넌트에서 emit을 이용하여 변경한뒤에
다시 전달하여 마치 양방향 props를 사용하는 것과 같다.