인프런 커뮤니티 질문&답변

   <div id="app">
        <p>{{num}}</p>
        <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
        <app-header v-on:pass="logText"></app-header>
        <app-content v-on:addNum="numPlus"></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function () {
                    this.$emit('pass');
                }
            }
        }

        var appContent = {
            template: '<button v-on:click="addNumber">add</button>',
            methods: {
                addNumber: function () {
                    this.$emit('addNum');
                }
            }

        }
        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            },
            methods: {
                logText: function () {
                    console.log('hi');
                },
                numPlus: function () {
                    this.num = this.num + 1;

                }
            },
            data: {
                num: 10
            }
        });