1. 컴포넌트 통신

Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보냅니다. 어떻게 작동하는지 보겠습니다.

출처 : https://kr.vuejs.org/v2/guide/components.html#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%9E%91%EC%84%B1

2. props 속성

사용방법

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

예시

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

<script>
    var appHeader = {
        template: '<h1>Header</h1>',
        props: ['propsdata']
    }

    new Vue({
        el: '#app',
        components: {
            'app-header': appHeader
        },
        data: {
            message: 'hi'
        }
    })
</script>

3. event emit

버튼 클릭 이벤트

var appHeader = {
    template: '<button v-on:click="passEvent">click me</button>',
    methods: {
        passEvent: function() {
            this.$emit('pass'); //pass라는 이벤트
        }
    }
}

아래와 같이 이벤트 로그를 확인할 수 있습니다.

사용방법

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

예시

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

<script>
    var appHeader = {
        template: '<button v-on:click="passEvent">click me</button>',
        methods: {
                passEvent: function() {
                this.$emit('pass');
            }
        }
    }

    new Vue({
        el: '#app',
        components: {
            'app-header': appHeader
        },
        methods: {
            logText: function() {
                console.log('hi');
            }
        }
    });
</script>

4. 뷰 인스턴스에서의 this

자기자신을 가리키는 this