Vue_12 컴포넌트간 데이터 전달(부모to자식, 자식to부모)

부모-자식 간 데이터 전달은 크게 부모 -> 자식과 자식 -> 부모 두 가지 방향으로 나뉨.

 

---

1. 부모 -> 자식: props

• props는 부모가 자식에게 데이터를 단방향으로 전달할 때 쓰는 것임.
• 부모가 데이터를 짐(Props)으로 전달하면, 자식은 그 짐을 받아서 사용할 수 있음. 다만, 자식은 그 짐을 열어볼 수는 있지만, 수정할 수는 없음. 즉, 자식은 부모에게 받은 데이터를 읽기 전용으로 처리할 수 있음

 

부모가 자식에게 상자를 줬다고 생각하면 됨.

자식은 그 상자를 열어서 안에 든 걸 볼 수는 있지만,

내용물을 바꾸는 건 안 됨.

상자의 내용물을 바꾸려면 부모가 바꿔줘야 함.

 

<!-- 부모 컴포넌트 -->
<template>
  <child-component :message="parentMessage" />  <!-- 부모가 자식에게 message 전달 -->
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent'  // 부모의 데이터
    };
  }
}
</script>

<!-- 자식 컴포넌트 -->
<template>
  <p>{{ message }}</p>  <!-- 부모에게 받은 message를 출력 -->
</template>

<script>
export default {
  props: ['message']  // 부모로부터 전달받은 message를 읽기 전용으로 사용
}
</script>

 

---

2. 자식 -> 부모: 두 가지 방식

자식이 부모에게 데이터를 전달할 때는 두 가지 방법이 있음.

첫 번째 방법은 부모와 자식이 서로 데이터를 동기화할 수 있는 양방향 바인딩(v-model)을 사용하는 것이고,

두 번째 방법은 자식이 부모에게 이벤트를 발생시켜 데이터를 전달하는 $emit 방식임.

---

2-1. v-model을 통한 양방향 바인딩

• v-model은 자식이 부모의 데이터를 수정할 수 있게 해주는 방식임.
• 부모가 자식에게 데이터를 넘기면, 자식은 그 데이터를 보고 수정할 수 있음. 수정된 내용은 즉시 부모에게 반영됨. 

 

부모가 자식에게 연필을 줬다고 생각하면 됨. 자

식은 그 연필을 쓸 수도 있고, 자기가 원하는 대로 고칠 수 있음.

그리고 자식이 연필을 고치면, 부모의 연필도 똑같이 고쳐지는 거임.

부모와 자식이 같은 연필을 쓰고 있다고 보면 됨.

<!-- 부모 컴포넌트 -->
<template>
  <child-component v-model="message" />  <!-- 부모와 자식이 message 데이터를 공유 -->
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Parent'  // 부모의 데이터
    };
  }
}
</script>

<!-- 자식 컴포넌트 -->
<template>
  <input v-model="localMessage" />  <!-- 자식이 부모의 message를 수정할 수 있음 -->
</template>

<script>
export default {
  props: ['value'],  // 부모로부터 받은 값(value)을 사용
  computed: {
    localMessage: {
      get() {
        return this.value;  // 부모의 데이터를 그대로 가져옴
      },
      set(newValue) {
        this.$emit('input', newValue);  // 자식이 수정한 내용을 부모에게 즉시 반영
      }
    }
  }
}
</script>

 

---

2-2. $emit을 통한 이벤트 기반 통신

• $emit은 자식이 이벤트를 발생시켜 부모에게 데이터를 전달하는 방식임. 자식은 부모에게 데이터나 상태 변화를 알릴 수 있음.
• 부모는 자식이 보낸 이벤트를 청취(listen)하고, 그 데이터를 받아서 추가적인 처리를 할 수 있음.

 

자식이 부모에게 소리쳐서 알리는 것이라고 보면 됨.

"엄마! 나 이거 했어!"라고 말하는 것처럼

자식이 부모에게 데이터를 보내는 거임.

부모는 자식의 외침을 듣고, 그에 따라 추가적으로 뭘 할지 결정함.

<!-- 부모 컴포넌트 -->
<template>
  <child-component @customEvent="handleEvent" />  <!-- 자식이 customEvent를 발생시키면 처리함 -->
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log('Received from child:', data);  // 자식이 보낸 데이터를 처리함
    }
  }
}
</script>

<!-- 자식 컴포넌트 -->
<template>
  <button @click="sendData">Send Data to Parent</button>  <!-- 버튼 클릭 시 부모에게 이벤트 발생 -->
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', 'Hello from Child!');  // customEvent를 부모에게 발생시키며 데이터 전달
    }
  }
}
</script>

---

- 부모 -> 자식으로 데이터를 보낼 때는 props를 사용함.

부모가 자식에게 데이터를 단방향으로 전달할 수 있지만, 자식은 그 데이터를 수정할 수 없음.

 

- 자식 -> 부모로 데이터를 보내는 방법은 두 가지가 있음.

1. v-model을 사용하면 부모와 자식이 양방향으로 데이터를 주고받으며, 자식이 부모의 데이터를 즉시 수정할 수 있음.
2. $emit을 사용하면 자식이 부모에게 이벤트를 발생시켜 데이터를 보내거나 상태 변화를 알림. 부모는 이를 청취해서 필요한 작업을 처리함.