6. 컴포넌트 통신 방식(props, 이벤트)

#컴포넌트 통신 규칙이 필요한 이유

상위 컴포넌트와 하위 컴포넌트들이 데이터를 전달할때에 어떠한 규칙이 없다면

뒤죽박죽 데이터를 교환하게된다면 말도 안되는 데이터의 관계가 생기게 될수 있다.

특정 상태, 데이터가 바뀌었을때에 그로 인한 버그를 추가하기가 어려운게 

N방향 패턴이다(mvc패턴에서 이러한 문제가 있었다고한다)

데이터를 아래로만 내린다면 컴포넌트 통신방식의 규칙이 생겼을때에는
데이터의 흐름을 추적할 수 있다. (항상 데이터는 내려오고 아래서 위로는 이벤트가 올라가기 때문이다)
Props(이곳에 내려가는 속성의 data를 넣어준다)
Event(위로 이벤트를 전달, 데이터를 올리는게 아니라 이벤트를 올리는 것이다)

각각의 컴포넌트는 데이터를 각각 관리하는데 이걸 공유하기 위해서는 

PROPS라는 속성과 이벤트를 관리해야한다.

- 상위에서 하위로는 데이터를 내려줌, 프롭스 속성
- 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생

 

 

#props 정의하는 방법

<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>

<app-header v-bind:propsdata="message"></app-header>

<app-content v-bind:propsdata="num"></app-content>

이미지를 보면 알 수 있는것처럼 AppHeader, AppContent의 상위 컴포넌트는 <Root>이다.

 

#props 속성의 특징
상위 컴포넌트의 data의 값이 바뀌면 하위 컴포넌트도 그대로 바뀐다.

 

 

#이벤트

<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header>

<app-header v-on:pass="logText"></app-header>

<app-content v-on:increase="increaseNumber"></app-content>

이미지를 보면 알수 있듯이 하위 컴포넌트에서 발생한 이벤트는 pass와 increase가 있고,

상위 컴포넌트에의 메서드 이름은 logText와 increaseNumber가 있다.

 

click me 를 클릭시에는 logText 펑션이 실행되어

console에 hi가 출력된다.

 

add 를 클릭시에는 상위컴포넌트인 Root에 선언된 data num이

increaseNumber 펑션이 실행되어 this.num +1이기에

값이 누를때마다 1씩 증가한다.

 

 

new Vue({

      el: '#app',

      components: {

        'app-header': appHeader,

        'app-content': appContent

      },

      methods: {

        logText: function() {

          console.log('hi');

        },

        increaseNumber: function() {

          this.num = this.num + 1;

        }

      },

      data: {

        num: 10

      }

    });

혹시 모르시는 분들도 있을거 같아서 this에 대해서 잠깐 설명하자면

this는 해당 오브젝트(객체)를 바라보게된다.

즉, this.num을 해주었을때에 해당 객체의 num을 가져온다는것이다.