[Vue] Vue(8) Custom event

애플 코딩 vue 강의 공부 내용

props => 부모 요소의 데이터를 자식 요소가 받아서 사용할 수 있게 전달해 주는 것이다

// App.vue

<Modal :data = "data"/>

data(){
	return{
    	data:10
    }
}

// ModalBanner.vue

<p>{{data}}<p>
  
props : {
	data : Number
}

일반적으로 부모에게 받아서 자식이 사용하는 경우 Props는 이렇게 사용한다.
하지만

<p> {{ data }} <p>
<button @click="data=20">버튼<button>

이렇게 사용하는 경우 자식의 요소에서 부모의 변숫값을 바꾸는 게 되기 때문에
Unexpected mutation of "변수" prop 에러가 발생한다

그렇다면 자식 요소에서 data : 10이라는 값을 저장하면 문제가 없지 않을까?
라고 생각을 하지만, props로 보낸 데이터는 Read-only라서 수정이 금지된다

그러면 이벤트 자체를 props로 전달해 주면 어떨까?
이벤트 버블링 이라는 현상이 발생하여 상위 요소들을 전부 클릭하게 되어버리는 것이다.

이러한 점을 해결하기 위해 custom event라는 것을 사용한다.

custom event 기본 문법

// 자식요소
<p @click="$emit('작명',보내고싶은데이터)"></p>
// 부모요소
<Modal @작명="기존데이터변수 = @event"/>

// 부모 요소
<Card :data="data" :dataId="dataId" @showme="show = $event" @datanum="dataId = $event"/>

export default {
  data() {
    return {
      dataId: 0,
      show: false,
      data: data,
      
    };
  },
    
// 자식 요소
    <template>
  <div v-for="(data, i) in data" :key="i">
    <img :src="data.image" class="room-image" />
    <h4
      @click="
        $emit('showme',true);
        $emit('datanum',data.id);
        
      "
    >
      {{ data.title }}
    </h4>
    <p>{{ data.price }}</p>
  </div>
</template>

<script>
export default {
    props:{
        data : Object,
        dataId : Number,
    }
}
</script>
 

제목 타이틀을 클릭했을 때 제목에 해당하는 상세페이지를 보여주기 위한 코드입니다
기존에 Data Binding 하는 내용들은 {{ }} 안에 변수명을 입력하면 사용 가능하지만, 컴포넌트 요소에서 클릭했을 때 부모 요소의 데이터가 바뀌기 때문에 Custom event를 사용했다

클릭 시 showme라는 변수에 true값을 저장해놓고
@datanum="dataId = $event" event 값에 저장해놓고 dataId 값에 지정을 해주는 방식이다.