Props, Emit 정리

• 복습
  directive
  • v-bind : 엘리먼트 속성을 vue인스턴스의 속성과 바인딩을 해주는 directive
    v-bind:속성명="데이터"
    -> 지정된 값이 변경될 때마다 자동으로 업데이트가 된다.
  • v-on : 이벤트 리스너를 등록하는 directive.
    v-on:이벤트명="메서드"
    -> 이벤트가 발생했을 때 메서드가 실행된다.

컴포넌트 데이터 전달 방법

부모 -> 자식 : props
자식 -> 부모 : emit

Props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법

• 부모 : HTML 속성으로 해서 속성명="값" 데이터가 자식에게 전달
• 자식 : props 옵션에다가 받을 속성명과 타입을 정의를 해서 그 값을 받는다!

// 자식 코드에서는... props 속성을 정의
export default {
props:{
message: String,
count:{
type: Number,
required: false,
default: 0,
}
}
}

Props로 데이터 전달 방법

• Static Props : 정적인 데이터를 전달 : 하드 코딩된 값을 사용해서 자식 컴포넌트에게 전달
  
• Dynamic Props : 동적인 데이터를 전달 : 변수를 자식에게 전달.. 동적으로 변경할 수 있는 값을 전달
  
  
  export default {
  data(){
  return {message: 'Hello world!:)'}
  }
  };

알아두면 좋을 것들...
props 자체는 부모 -> 자식... 단방향으로 전달되는 방식.

자식에서 props를 변경할 수가 X!
-> 강제적으로 수정을 시도를 하면... 에러가 발생...
->자식 컴포넌트에게만 데이터 변경 해당 사항... 부모에게는 전달 x

Emit

자식 -> 부모 : 이벤트 발생! 자식 HTML엘리먼트 -> 부모 HTML 엘리먼트...
-> 이벤트를 기반으로 한 통신 방식을 사용!

• 자식 : $emit 함수를 통해서 이벤트를 발생
• 부모 : 이벤트를 처리하는 핸들러(메소드)를 등록

// 자식
<button @click="sendMessage">메시지 보내기
methods:{
sendMessage(){
this.$emit('이벤트명', 전달데이터);
}
}

//부모
<ChildComponent v-on:이벤트명="핸들러메소드">
methods:{
핸들러메소드(전달받은데이터){
console.log(전달받은데이터);
}
}

알아두면 좋을 것들...
Q. emit 한번으로 조상 컴포넌트에게 데이터를 전달할 수 있는게 아닐까??
A. X, 자바스크립트에서 기본적으로 사용하는 이벤트 처리... -> "글로벌 이벤트 버스"
구성 요소별로 이벤트 버스를 따로 만들어서 둠... "부모 <-> 자식" 이벤트 버스를 각각 따로!
if 자식 -> 부모 -> 부모's 부모... 자식 emit. -> 부모 emit -> 부모's 부모 전달 받음!

가장 헷갈려 하는 것...

• CamelCase : 자바스크립트
• kebab-case : HTML 코드 (HTML은 대소문자를 구분할 수가 없어서, 이렇게 써준다.)

Props, Emit 최종 정리

정의
props : 상위 컴포넌트 -> 하위 컴포넌트로 데이터 전달
emit : 하위 컴포너트 -> 상위 컴포넌트로 이벤트를 발생

방향
props, emit : 단방향 데이터 흐름

특징
props : 부모 컴포넌트에서 전달 받은 값을 수정x
emit : 자식 컴포넌트에서 이벤트를 발생시켜서 부모 컴포넌트의 이벤트 핸들러 실행

사용

• props : 속성을 사용해서 자식 컴포넌트에게 전달 HTML엘리먼트 속성
  • 속성명="정적데이터값" v-bind:속성명="동적데이터값"
• emit : $emit 메소드를 사용해서 이벤트를 발생
  • 부모 컴포넌트에서 v-on:이벤트명="이벤트핸들러" 이벤트 처리