[Vue.js] props & emit 사용 가이드

props : 부모(상위) 컴포넌트에서 호출하는 자식(하위) 컴포넌트에게 전달해주는 데이터(문자, 숫자, 객체)
emit : 자식(하위) 컴포넌트에서 부모(상위) 컴포넌트에게 전달해주는 데이터
 
ex) 부모 컴포넌트 (구매리스트 : buyList.vue)에서 호출 된 자식 컴포넌트( 데이트피커 컴포넌트 : DatePicker.vue)

  <DatePicker
    :propRuleType="'ymd'"
    :showType="'ranged'"
    :startDate="startDate"
    :endDate="endDate"
    @selectStartDate="
      (seletedValue) => {
        startDateEx = seletedValue;
      }
    "
    @selectEndDate="
      (seletedValue) => {
        endDateEx = seletedValue;
      }
  >
  </DatePicker>

위 컴포넌트는 props(:으로 시작) 와 emit(@로 시작) 두 부분으로 나뉘어 집니다.

[props]

• [부모, 상위]구매 목록(buyList.vue) 에서
  [자식, 하위]데이트피커 컴포넌트(DatePicker.vue)호출 할 때 지정하는 데이터입니다.

아래와 같이 구매리스트에서 Datepicker 컴포넌트를 호출하게 되면 콜론 뒤에 작성하는게 props입니다.
props를 통해 컴포넌트에게 다음과 같은 데이터를 전달해주어 출력하게 합니다.

  :propRuleType="'ymd'"
  :showType="'ranged'"
  :startDate="startDate"
  :endDate="endDate"

위와 같이 props로 데이터를 바인딩할 수 있고, 문자열로 작성할 수 있습니다.
데이터 바인딩 시에는 :프롭스예시= " 데이터 " 쌍콤마 사이에 데이터를 넣습니다.
문자열 입력 시에는 :프롭스예시= " '문자열' " 쌍콤마 사이에 콤마를 한 더 감싸서 문자열로 입력하시면 됩니다.

[emit]

• [자식, 하위]데이트피커 컴포넌트(DatePicker.vue) 에서 변경/선택 된 값을 함수를 통해
• [부모, 상위]구매 목록(buyList.vue) 에게 전달하는 데이터 입니다.

DatePicker는 날짜 변경이 발생 했을 때, onChangeSelectDate 함수가 실행되어 변경 된 날짜 데이터를 emit
다음과 같은 형식으로 부모 컴포넌트인 구매리스트에게 전달합니다.

// DatePicker.vue
  onChangeSelectDate(getDateType) {
  	switch (getDateType) {
            case a:  this.$emit("selectSingleDate", this.SingleDate);
                     break;
            case b:  this.$emit("selectStartDate", this.StartDate);
                     break;
            case c:  this.$emit("selectEndDate", this.EndDate);
                     break;
            default: break;
     }
  }

우선 emit 함수는 this.$emit("emit명 : 부모(상위)에서 해당 emit 함수를 받아주는 이름" , 전달할 데이터) 로 구성되어 있습니다.
여기서 중요하게 보셔야 할 것은 this.$emit 메서드 괄호 안에 인자 값인 "selectSingleDate"입니다.
자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달(emit)할 때, 부모 컴포넌트에서 선언 된 해당 인자 명으로 전달하기 때문에 이 부분을 꼭 맞춰야 합니다.

// buyList.vue - <template> - <DatePicker> 컴포넌트 내
  @selectStartDate="
    (seletedValue) => {
      startDateEx = seletedValue;
    }
  "
  @selectEndDate="
    (seletedValue) => {
      endDateEx = seletedValue;
    }

구매 목록(부모 컴포넌트) 에서 해당 emit 값을 받을 때,
@인자명 = " ( seletedValue ) => { this.exData = seletedValue } " 이런 형식으로 작성이 되어있습니다.

• 인자명은, props에서 보내는 인자명과 동일하게 맞춰야 하며
• 파라미터로 들어있는 seletedValue는 자식 컴포넌트에서 입력 한 두번째 인자 값 ( this.SingleDate / this.StartDate / this.EndDate ) 입니다.
• 이후 중괄호 { } 내에서 해당 값(seletedValue) 을 부모 컴포넌트의 데이터에 저장하시면 됩니다.

 

 

 

---

함께 읽으면 좋은 글 

 

vue-router 설정 방법 : 2023.05.02 - [Dev/✅ Vue.js] - vue-router 설치부터 환경설정 및 사용방법

vue-router 설치부터 환경설정 및 사용방법

 

axios 설정 방법 :2023.04.18 - [Dev/✅ Vue.js] - [Vue] Axios를 이용한 http 통신 - 설치부터 예제, 비동기 처리까지.

[Vue] Axios를 이용한 http 통신 - 설치부터 예제, 비동기 처리까지.

 

vuex 모듈 설정 및 사용 방법 : 2023.03.16 - [Dev/✅ Vue.js] - Vuex 모듈 및 사용 방법 정리

Vuex 모듈 및 사용 방법 정리