같은 컴포넌트 레벨 간의 통신 방법 구현

Root를 거친다.

<div id="app">
    <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
    <app-header v-bind:propsdata="num"></app-header>
    <app-content v-on:pass="deliverNum"></app-content>
</div>

<script>
    //app header에서 app content로 10 넘기기
    var appHeader = {
        template: '<div>header</div>',
        props: ['propsdata']
    }
    var appContent = {
        template: '<div>content<button v-on:click="passNum">pass</button></div>',
        methods: {
            passNum: function() {
                this.$emit('pass', 10);
            }
        }
    }        
    new Vue({
        el: '#app',
        components: {
            'app-header': appHeader,
            'app-content': appContent
        },
        data: {
            num: 0
        },
        methods: {
            deliverNum: function(value) {
            this.num = value;
            }
        }
    })
</script>