[Vue.js] 부모 자식 간의 데이터 흐름

✅ 1. 부모 → 자식: props를 통해 전달

🔹 부모 컴포넌트

<ChildComponent :message="parentMessage" />

export default {
  data() {
    return {
      parentMessage: '안녕하세요!'
    }
  }
}

🔹 자식 컴포넌트

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message'] // 부모가 전달한 데이터 수신
}
</script>

✅ 2. 자식 → 부모: $emit()으로 이벤트 전달

🔹 자식 컴포넌트

<template>
  <button @click="$emit('openModal', i)">상세보기</button>
</template>

• $emit('이벤트명', 전달할값) 형태로 부모에게 알림

🔹 부모 컴포넌트

<ChildComponent @openModal="isModal=true; selectedMovie=$event" />

• 전달한 값 i는 $event로 받을 수 있다.

💡 요약