부모 자식 Component간에 데이터 바인딩(prop, emit, defineModel)

데이터 바인딩

 부모 컴포넌트에서 자식 컴포넌트를 사용하려면, 데이터를 전달하거나 전달 받아야 합니다. 

 vue3.3 이후 버전에서는 defineModel 기능이 지원되는데 이걸 사용하면 양방향 바인딩이 됩니다.

 

자식 코드

<template>
  <div>
    <input v-model="parentData" />
  </div>
</template>

<script setup lang="ts">
const parentData = defineModel<string>('textData');
</script>

 

부모코드

<template>
  <q-page>
    <ChildComponent v-model:textData="parentData" />
    <button @click="changeData">Change Data</button>
  </q-page>
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
const parentData = ref('initial data');

function changeData() {
  parentData.value = 'new data from parent';
}
</script>

이렇게 하면 부모쪽에서 changeData 함수를 호출하면 항상 자식 컴포넌트에 반영되는걸 알 수 있다.

 

전통적인 데이터 바인딩

 지금까지도 자주 사용하는 방법은 prop과 emit을 이용하는 방법입니다.

  prop은 부모에서 자식으로 데이터 전달하는 단방향이고, emit은 자식에서 부모에 이벤트 트리거를 단방향으로 하는거라서 양방향 바인딩하려면 조금 복잡합니다. 

 그리고 무엇보다 부모의 데이터의 반응성을 자식에서도 계속 유지하려면, 필수로 해당 데이터에 대한 prop과 emit을 구현해 줘야 하는데 코드도 조금 길어집니다. 

  그러나 단방향이기 때문에 한쪽의 데이터를 다른쪽에서 건드리지 않길 원할때 사용하면 좋습니다.

 

결론

 사용하기 간편한 defineModel 사용하길 추천합니다.