Vue.js props, custom event (자식에서 부모 데이터 수정)

- Props

1)Props보낼 떄 다양한 자료 입력이 가능하다. 그리고 직접 데이터 입력도 가능하다.

<Component data="12345">
//혹은 배열등 다 가능

<Component data="12345">
// data="문자자료"
<Component :data="12345">
// :data="숫자자료:

그리고 : 유무에 따라 문자냐 숫자냐 자료형의 차이가 있다.

 

2)object자료형 한번에 보내거나, 각각 보내거나 둘다 가능하다.

 

- custom event 

1)props로 보낸 데이터는 수정하면 안된다. (Read-only)

 

2)부모컴포넌트의 데이터를 수정하고 싶으면 custom event를 쓴다.

부모에게 $emit('작명',데이터)을 써서 메세지를 보낸다.

CardList.vue


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

........

App.vue의 하위 컴포넌트인 CardList.vue에서 부모컴포넌트의 데이터를 수정하고 싶다.

 

부모에게 $emit('작명',데이터)을 써서 메세지를 보내주고 부모에서 받아서 사용해준다.

App.vue

.........

<CardList @openModal="modal= true; roomNumber=$event" :oneroom="oneroom[i]" v-for="(a,i) in oneroom" :key="i"></CardList>


.........

풀어서 써보면, 자식컴포넌트 CardList.vue의 <h4>에서 클릭 이벤트가 발생하면 opemModal이란 메세지를 부모로 보내고

 

부모에선 해당 메세지를 받을 시 부모 컴포넌트의 modal이란 자료형을 false에서 true로 바꾸게 한다.

 

그리고 roomNumber라는 변수는 $emit('작명',데이터) 의 데이터 부분을 저장한다 그때는 변수 = $event 형식을 이용한다.

 

3)함수로 만들어서 사용하기

아래와 같이 methods에 $emit를 이용해 함수를 만들어서 사용할 수 도 있다.

<button>쪽에 클릭 이벤트에 삽입해 사용 했다.

참고로 methods에서는 this키워드와 함께 사용해 줘야 한다. $emit('작명',데이터)모두!

ModalPopup.vue

<template>
    <div class="black-bg" v-if="modal == true">
    <div class="white-bg">
      <h4>{{ oneroom[roomNumber].title }}</h4>
      <p>{{ oneroom[roomNumber].content}}</p>
      <p>{{ oneroom[roomNumber].price}}</p>
      <!-- <button @click="modal=false">닫기</button> -->
      <!-- Props는 읽을 수 만있다. 수정은 안됨 -->
      <button @click="closeModal()">닫기</button>
    </div>
  </div>
</template>

.....
      methods:{
        closeModal(){
          this.$emit('closeModal',this.oneroom.id)
        }

      },
      
      
 .....

 

4)이벤트 버블링으로 해결하기 (직접 외부 컴포넌트 전체에 이벤트 걸기)

아래와 같이 $emit을 사용하지 않고 컴포넌트 전체가 클릭되게되면 모달이 뜨게 부모 컴포넌트 자체에서 해결도 가능하지만 특정버튼, 특정 요소만 클릭했을 때 처럼 디테일하게는 할 수 없다. 그래도 대안 중의 하나.

추후 이벤트 버블링에 대해서 공부해보자.

App.vue

......

<CardList @click="modal = true" :oneroom="oneroom[i]" v-for="(a,i) in oneroom" :key="i"></CardList>


.....

 

- 결과물 (props와 emit을 사용해 컴포넌트화)

CardList.vue

0.00MB

ModalPopup.vue

0.00MB

App.vue

0.00MB