props / event Emit (2)

 컴포넌트 간에 데이터를 주고 받기 위한 규칙을 알아 보았다. 그렇다면 서로 같은 level에 있는 컴포넌트 끼리 데이터를 

주고 받기 위해서는 어떤 방식으로 규칙을 지키면서 움직여야 할까? 

 

위에 그림과 같이 같은 level에 존재하는 하위 컴포넌트 끼리 데이터를 주고 받기위해서는 규칙에 맞게 움직이면서 데이터를 전달 해야한다.

 

즉 상위 컴포넌트로 데이터를 전달(event)하고 그 데이터를 다시 하위 컴포넌트로 보낸다(props)는 규칙을 통해서 전달한다

그 전 포스팅에서도 말했듯이 이러한 규칙을 지키지 않는다면 버그가 발생했을때 추적하기 힘들어지는 문제가 발생한다.

 

예제 코드

예제에서는 간단하게 root 컴포넌트와 하위 하나씩 컴포넌트의 구조로 하겠습니다.

<div id="app">
        <app-header v-bind:propsdata="num"></app-header>
        <app-content v-on:pass="deliverNum"></app-content>
</div>

 

        //같은 level의 하위 컴포넌트
        var appHeader ={
            template : '<div>header</div>',
            props : ['propsdata']
        }
        
        //같은 level의 하위 컴포넌트
        var appContent = {
            template : '<div>content<button v-on:click="passNum">pass</button></div>' , 
            methods : {
                passNum : function(){
                    this.$emit('pass' ,100);
                }
            }
        }
        //상위 컴포넌트
        var vue = new Vue({
            el : '#app',
            components: {
                'app-header' : appHeader , 
                'app-content' : appContent
            },
            data : {
                num : 0
            },
            methods : {
                deliverNum : function(val) {
                    this.num = val;
                }
            }
            
        });

 

1.appContent 컴포넌트에서 상위 컴포넌트로 12의 값을 보냈다.(event emit)

2.그 값이 상위 컴포넌트 num에 저장이 되었다.

3. 저장된 num의 값을 하위 컴포넌트로 보낸다.(props)