[Vue.js] 컴포넌트 상·하위 컴포넌트의 통신 방식

상위(Parent) 컴포넌트와 하위(Child) 컴포넌트 간에 통신 방식은 props와 event로 구성된다.

Props

props 속성은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 속성이다.

props 속성 코드 형식

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
    <app-header v-bind:프롭스 속성명="상위 컴포넌트의 data명"></app-header>
</div>

// 하위 컴포넌트
var appHeader = {
    props: ['프롭스 속성명']
}

props 속성 코드 예시

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

// 하위 컴포넌트 내용
var appHeader = {
    template: '<h1>{{ propsdata }}</h1>',
    props: ['propsdata']
}
var appContent = {
    template: '<div>{{ propsdata }}</div>',
    props : ['propsdata']
        }

// 상위 컴포넌트 : root
new Vue({
    el: '#app',
    components: {
        // 하위 컴포넌트 
        'app-header': appHeader,
        `app-content` : appContent
    }
    data: {
        message: 'hi',
        num: 10
    }
});

---

Event Emit

이벤트 발생은 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식이다. 하위 컴포넌트에서 특정 이벤트가 발생하면, 상위 컴포넌트가 해당 이벤트를 수신하여 통신하는 구조이다.

이벤트 발생 코드 형식

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
    <app-header v-on:이벤트명 = "상위 컴포넌트의 실행할 메서드명"></app-header>
</div>

// 하위 컴포넌트
this.$emit('이벤트명');

이벤트 코드 예시

<div id="app">
    <app-content v-on:increase="increaseNumber"></app-content>
    <p>{{ num }}</p>
</div>

// 하위 컴포넌트 내용
var appContent = {
    template: '<button v-on:click="addNumber">add number</button>'.
    methods: {
        addNumber: function() {
            this.$emit('increase');
        }
    }
}
new Vue({
    el: '#app',
    components: {
        'app-content' : appContent
    },
    methods: {
        increaseNumber: function() {
            this.num += 1;
        }
    data: {
        num: 10
    }
});