[Vue] Custom Event

• props를 사용했을 때, 부모의 데이터를 자식이 사용했다.
• 그런데, click과 같은 이벤트에서 ready-only 데이터를 변경할 수 없었다.
  • 부모의 데이터를 바꾸고 싶으면 커스텀 이벤트를 사용한다.

<template>
    <div>
        <img :src="room.image" class="room-img">
        <h4 @click="$emit('openModal', true)"> {{ room.title }} </h4>
        <p> {{ room.price }} 원</p>
    </div>
</template>

• 자식에서 해당 이벤트를 발생 시키고 싶을 때, emit을 이용해 부모에게 이벤트를 발생시킨다.

 <TheCard @openModal="isModalOpen = true" :room="room" v-for="(room, i) in products" :key="i" />

• 부모는 해당 이벤트를 받고 처리해줄 것을 진행하면 된다.
• 그런데 어떤 컴포넌트를 눌렀는지 모른다.

<template>
    <div>
        <img :src="room.image" class="room-img">
        <h4 @click="$emit('openModal', room.id)"> {{ room.title }} </h4>
        <p> {{ room.price }} 원</p>
    </div>
</template>

• emit 시, 해당 방번호가 어떤 것인지에 대한 정보를 보내면 된다.

<TheCard @openModal="isModalOpen=true; clickedNum=$event" :room="room" v-for="(room, i) in products" :key="i" />

• $event로 전달 받은 데이터를 꺼낼 수 있다.