props / event Emit

props 

-프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 입니다.

프롭스 속성을 기억할 때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억하면 쉽다!

 

사용 예시 코드

html

<div id="app">
        <!-- <app-header v-bind:프롭스 속성이름="상위컴포넌트 데이터 이름"></app-header> -->
        <app-header v-bind:propsdata="message"></app-header>
        <!-- HTML은 대소문자 구분 하지 않는다!. 주의해야 한다-->
</div>

js

	//하위 컴포넌트
    var appHeader = {
            template: '<h1>{{ propsdata }}</h1>',
            props: ['propsdata']
        }
        
     //상위 컴포넌트   
        new Vue({
            el : '#app' , 
            components : {
                'app-header' : appHeader
            },
            data : {
                //상위 컴포넌트 데이터 이름 : message
                message : 'Root message',
                num : 10
            }
        });

 

props 흐름

1. 상위 컴포넌트의 data값이 저정된다

2. data 값이 html v-bind 속성 이름으로 들어간다

3. 하위 컴포넌트의 props와 template에 들어간다.

 

 

 

event emit

-컴포넌트의 통신 방법중 하위 컴포넌츠에서 상위 컴포넌트로 통신하는 방식입니다.

 

사용예시 코드 

html

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

js

	//하위 컴포넌트
    var appHeader = {
            template : '<button v-on:click="passEvent">click</button>',
            methods : {
                passEvent : function(){
                    this.$emit('pass'); //pass라는 이벤트 발생!
                }
            }
        }
        
        //상위 컴포넌트
        new Vue({
            el : '#app' ,
            components : {
                'app-header' : appHeader
            },
            methods : {
                logText : function() {
                    console.log('logText');
                }
            }
        });