Vue에서 defineModel로 컴포넌트 간 양방향 바인딩하기

Vue 3.4부터는 defineModel() 매크로가 추가되었다.

덕분에 양방향 바인딩이 편해졌다.

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

<template>
    <div>
        <label for="test">
            test
        </label>
        <input type="text"v-model="inputValue">
    </div>
</template>

<style scoped></style>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue' 

const value = ref('')
</script>

<template>
    <Child v-model="value" />
</template>

<style scoped>

</style>

 

이런 식으로 defineModel 매크로를 사용하면, defineProps, defineEmit 없이 컴포넌트 간 양방향 바인딩이 가능해진다.