Vue) 09. $emit()으로 props 데이터를 자식 컴포넌트에서 수정하기..

이전 문제점)

📌 이전 props의 문제점 - 참고

자식 컴포넌트(ModalWindow.vue)인 모달창 컴포넌트에 존재하는 닫기버튼을 눌렀을 시, 부모 컴포넌트(App.vue)의 modalOpen값이 false가 되어야만 닫을 수 있었다.

하지만 props로 자식컴포넌트에게 받은 modalOpen값이기 때문에 데이터를 수정하지 못했는데 이러한 문제를 해결해주는 방법이 존재한다!

간단 문법 )

자식 컴포넌트 )

예제1 )

<button v-on:click="$emit('openModal', false)" class="modal-exit-btn">닫기</button>

$emit()이라는 것을 사용하면 부모 컴포넌트로 데이터를 보내줄 수 있다.

( )안의 문법은 $emit('만든 커스텀이벤트 이름', 보낼 데이터)이다.

또는 함수로 빼서 이렇게 해줄 수도 있다.

예제2 )

<template>
  <button v-on:click="modalClose" class="modal-exit-btn">닫기</button>
</template>

<script>
  methods: {
    modalClose() {
      this.$emit("openModal", false);
    },
  },
</script>

부모 컴포넌트 )

<!-- App.vue 템플릿의 모달창 컴포넌트 -->
<ModalWindow
  :products="products"
  :modalOpen="modalOpen"
  :clickValue="clickValue"
  @openModal="modalOpen = $event"
/>

@openModal이라는 emit으로 보냈던 커스텀 이벤트 이름으로 이벤트를 불러온다.

해당 커스텀 이벤트가 발생하면 무엇을 할지 넣어주면 끝!

여기서 $event는 emit으로 보냈던 데이터인 false이다.

정리 )

자식 컴포넌트에서 버튼을 클릭 시, emit을 이용하여 커스텀 이벤트를 만들고 데이터를 보내준다

부모 컴포넌트에서 자식 컴포넌트의 커스텀 이벤트가 발생 시, 데이터를 넘겨 받고 무엇을 할 지 써준다.

💡 설명이 난해하지만, 제대로 이해했다면 굳이 데이터를 안보내고 할 수 있지 않을까? 라는 생각이 들을 수 있다.

자식 컴포넌트 )

<button v-on:click="$emit('openModal')" class="modal-exit-btn">닫기</button>

부모 컴포넌트 )

<!-- App.vue 템플릿의 모달창 컴포넌트 -->
<ModalWindow
  :products="products"
  :modalOpen="modalOpen"
  :clickValue="clickValue"
  @openModal="modalOpen = false"
/>

물론 쌉가능이다. 이벤트만 받고 데이터를 주고 받을 필요없이, 그 자리에서 false로 바꿔주는 방법도 가능하다!