custom event

자식이 부모데이터를 바꾸고 싶을 때, 즉,

<template>
  <div v-for="(a,i) in 원룸들" :key="i">
    <img :src="원룸들[i].image" alt="" class="room-img">
    <h4 @click="모달창열렸니 = true; 누른거=i">{{원룸들[i].title}}</h4>
    <p>{{원룸들[i].content}}</p>
    <p>{{원룸들[i].price}}만원</p>
  </div>
</template>

이렇게 ,@click으로 부모에서 props로 받은 데이터들을 변경시킬 땐, custom event로 메세지를 준다.

 

이렇다는건 props로 받아온 데이터는 read-only이기에 수정이 불가능하기 때문이다.

 

custom event은 데이터 수정을 해달라는 메세지인데 메세지는 보내는 법과 수신하는 법이 있다.

vue에서 $는 특별한 변수이며 내장함수를 사용한다는 뜻이다.

$emit을 쓰게 되면 부모에게 메세지를 보내게 된다.

@click="$emit('작명', 데이터)"

이런 식으로, emit안에 작명을 하고 데이터를 넣으면 메세지를 보낼 수 있다.

<h4 @click="$emit('openModal',원룸들[i].id)">{{원룸들[i].title}}</h4>

이렇게 openModal이란 이름으로 데이터는 원룸.id란 고유의 숫자를 데이터로 보내면, app.vue에서 (즉 , 받는 쪽)

<Card @openModal="모달창열렸니 = true;누른거 = $event" 
	:원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />

이렇게, @작명한것 = "js코드"를 적어주면 된다.

그리고, 자식에서 보낸 데이터는 $event에 저장된다.

 

만약, $emit()을 함수안에서 하고 싶으면 this.$emit()을 해주면 된다.

props든 data든 $변수든 밑에서 사용할 땐 무조건, this를 붙여야 한다.

export default {
    name : 'Card',
    props : {
        원룸들 : Array,
        누른거 : Number,
        모달창열렸니 : Boolean,
    },
    methods : {
      함수() {
        this.$emit('openModal',this.원룸들[i].id)
      }
    }
}