Vue 커스텀 이벤트를 사용하여 자식 컴포넌트에서 부모 컴포넌트의 요소를 조작하기

갑시다

---

$emit 이용하기

DetailModal.vue

<template>
  <div class="modal-black-bg" v-if="detailModalView === true">
    <div class="modal-white-bg">
      <img class="modal-img" :src="oneRooms[detailIndex].image" alt="" />
      <h4>{{ oneRooms[detailIndex].title }}</h4>
      <p>{{ oneRooms[detailIndex].content }}</p>
      <p>보증금 : {{ oneRooms[detailIndex].deposit }}</p>
      <p>월세 : {{ oneRooms[detailIndex].monRent }}</p>
      <button @click="detailModalView = false">닫기</button>
    </div>
  </div>
</template>

• 나는 상세페이지에서 닫기버튼을 눌러 detailModalView를 false로 바꿔주고 싶었다 그러나 뷰에선 이것이 허용이 안된다
• 자식이 부모 컴포넌트에 있는 값을 마구잡이로 수정할 수 있게 둔다면 규모가 커질 시에 문제가 생겼을때 원인을 찾기 힘들어서로 보였다
• 그래서 우리가 할 수 있는건 $emit 를 이용하여 부모 컴포넌트에게 어떤 행위를 해달라는 요청을 하는 것이다

<template>
  <div class="modal-black-bg" v-if="detailModalView === true">
    <div class="modal-white-bg">
      <img class="modal-img" :src="oneRooms[detailIndex].image" alt="" />
      <h4>{{ oneRooms[detailIndex].title }}</h4>
      <p>{{ oneRooms[detailIndex].content }}</p>
      <p>보증금 : {{ oneRooms[detailIndex].deposit }}</p>
      <p>월세 : {{ oneRooms[detailIndex].monRent }}</p>
      <button @click="$emit('modalOff')">닫기</button>
    </div>
  </div>
</template>

• 닫기 버튼을 클릭 시에 $emit을 사용하여 부모 컴포넌트에게 modalOff라는 메세지를 보내고 있다

App.vue

  <DetailModal
  	@modalOff="detailModalView = false"
    :oneRooms="oneRooms"
    :detailIndex="detailIndex"
    :detailModalView="detailModalView"
  />

• 메세지를 받은 부모 컴포넌트에서 우리가 원하는 modalView 를 false로 스위칭 해줄 수 있다

---

$emit으로 특정 값을 전달해줄 수도 있다

App.vue
  <div v-for="(oneRoom, i) of oneRooms" :key="i">
    <RoomItem
      @RoomIndex="detailIndex = $event"
      @modalOn="detailModalView = true"
      :oneRoom="oneRoom"
    />
  </div>

• 이건 또 다른 RoomItem이라는 컴포넌트 인데 이 컴포넌트를 클릭하면 DetailModal 컴포넌트가 등장하게 된다
• DetailModal에는 어떤 RoomItem을 클릭하냐에 따라 다른 정보를 보여줘야 한다
• 그렇기 때문에 detailIndex가 필요한 것이다

RoomItem.vue

<template>
  <img
    @click="
      $emit('modalOn');
      $emit('RoomIndex', oneRoom.id);
    "
    :src="oneRoom.image"
    alt=""
    class="item-img"
  />
  <h4>{{ oneRoom.title }}</h4>
  <p>{{ oneRoom.deposit }} / {{ oneRoom.monRent }}</p>
  <div>
    <button>신고하기</button>
    <span>신고수 {{ oneRoom.reports }}</span>
  </div>
</template>

• img태그를 클릭하면 RoomIndex라는 이름의 $emit 메시지를 보내는 동시에 해당 RoomItem의 id를 보내주는 모습이다

App.vue
  <div v-for="(oneRoom, i) of oneRooms" :key="i">
    <RoomItem
      @RoomIndex="detailIndex = $event"
      @modalOn="detailModalView = true"
      :oneRoom="oneRoom"
    />
  </div>

• 다시 돌아와서 보자 @RoomIndex라는 메세지를 받으면서 detailIndex에 $event를 할당 해주는 모습이다
• 메세지에 값을 담아서 보내고 부모가 그 메세지와 자식이 보내준 값을 받아 필요한 곳에 할당해주는 모습이고 이게 $event의 역할이다

• @RoomIndex="detailIndex = $event" 부모 코드
• $emit('RoomIndex', oneRoom.id); 자식 코드