컴포넌트 ( 같은 레벨에서의 통신 )

같은 레벨에서의 통신은 어떻게 할 수 있을까? Root아래에 있는 자식끼리 서로 통신을 하는 방법은?

바로 1:1의 관계로 할 수 없고ㅡ Root를 통해서 거쳐가야 한다. 이때 앞에서 배운 props와 event를 사용한다.

 

보내는 쪽(from)은 event를 Root에게 보내면 Root는 받는 쪽(to)에 props를 보낸다.

 

appContent의 component가 appHeader로 데이터를 보낸다고 가정한다.

 

 

1. 보내는 쪽에서 Root에 event 보내기

appContent에 정의되어 있는 component 내에는 template을 정의한다.

ex) template : '<div>content <button v-on:click="passNum">pass</button></div>'

v-on을 통해 event를 발생시킨다는 것을 알 수 있으며, 우리는 passNum method를 만든다.

같은 component 내에 methods: { passNum: function() { this.$emit('pass',10) } 를 선언한다.

 

passNum을 보면 emit을 통해 pass를 발생시켜 신호를 보낸다.

 

이제 html 내에서 <app-content v-on:pass=""></app-content> 를 할당한다. 

pass는 emit을 통해 이벤트를 컴포넌트에 넣은 것이다.

 

2. Root에서 event로 온 데이터 확인하기

emit에서 pass를 보낼 때, 10이라는 값을 같이 넘겼다. 이 값을 어떻게 인지할 수 있을까?

Root에서 생각해보자. Root에 대한 정의는 보통 new Vue()로 선언된 곳 안에 있다.

그 안에 data : { num : 0 } 을 선언하면 이제 버튼을 눌렀을 때 Root에 num : 0이 잡힌다.

 

2-1 event를 통해 Root값을 최신화하도록 하기

<app-content v-on:pass=""></app-content> 을 보면 ""이 비어 있다.

이 곳은 상위 컴포넌트(Root)의 메소드 이름을 사용하면 된다.

<app-content v-on:pass="deliverNum"></app-content> 이라고 해보자.

 

new Vue() { 

  components : {

    data : { num : 0; },

    methods : { deliverNum : function(value) { this.num = value }

  }

}

 

emit을 통해 같이 넘어왔던 10의 값은 deliverNum함수에 자동으로 매개변수로 들어간다.

따라서 function(value)에서 value는 10의 값이 넘어간 것이며, num을 10으로 수정하게 된다.

즉, 버튼을 클릭하면, Root의 num값은 초기값인 0에서 10으로 변하게 된다.

 

3.Root에서 props로 전달하기

html내에 있는 <app-header"></app-header> 에 대한 수정이 필요하다.

이제 props의 사용이 필요하다.

 

<app-header v-bind:propsdata='num' "></app-header>의 형태가 될 것이다.

 

이제 받는 쪽의 app-header의 property를 설정한다. template도 설정한다.

var appHeader = {

  template: '<div>header</div>'

  props : ['propsdata']

} 

 

이제 버튼을 눌렀을 때,

1. event가 잘 발생하였는지,

2. Root 컴포넌트의 num이 정상적으로 변경이 잘 되었는지,

3.마지막으로 props가 제대로 반영이 되었는지

 

3가지를 확인하면 된다.

 

이제 html 내에 있는 v-bind와 v-on을 보고 어떠한 역할의 컴포넌트인지 알 수 있다.

한가지 드는 의문은... 기존의 javascript보다 오히려 더 복잡한 공식들이 필요해 보인다는 것이다.

 

하지만 MVVM의 장점인 바로바로 프런트에서 데이터의 수정이 이루어 진다는 것...?

event 기반으로 프런트가 작동이 된다는 것이 장점이지 않을까?

이제 event와 props에 대해 첫 걸음을 내디었다고 생각한다.

후에 나오는 많은 기능들에 대해서 공부하고 효율적인 프런트 작업을 살펴보아야겠다.