컴포넌트 통신

이 글은 본인이 캡틴판교님의 강의를 듣고 개인 스터디를 위해 기록해놓은 글 입니다.

컴포넌트 통신

상위 컴포넌트 -> props(데이터) 전달 -> 하위 컴포넌트
하위 컴포넌트 -> 이벤트 발생 -> 상위 컴포넌트

상위에서 하위로는 데이터를 내려줌 -> 프롭스 속성
하위에서 상위로는 이벤트를 올려줌 -> 이벤트 발생

예시 코드

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
        var appHeader = {
            template: '<h1>{{ propsdata }}</h1>',
            props: ['propsdata']
        }
        var appContent = {
            template : '<div>{{ contentdata }}</div>',
            props : ['contentdata']
        }
        new Vue({
            el: '#app',
            components : {
                'app-header' : appHeader,
                'app-content' : appContent
            },
            data : {
                message : 'hi',
                num : 10
            }
        })            
    </script>

부가 설명

1. 상위 컴포넌트는 id가 app이다.
2. id의 하위 컴포넌트는 'app-header'와 'app-content'가 있고, value는 각각 appHeader와 appContent 값을 가진다.
3. data 값은 key에 message:hi ,num:10의 data를 가진다.
4. appHeader는 프롭스의 이름이 propsdata이고, appContent는 프롭스의 이름이 contentdata를 가진다.
5. 화면에 값 전달을 하기 위해서는 v-bind:props명 = "상위 컴포넌트의 데이터 이름" 으로 사용한다.