Vue.js - 컴포넌트 통신 방식 props

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다.
따라서 컴포넌트 간에 데이터를 주고 받기 위해서는 다음과 같은 규칙을 따라야 한다.

상위에서 하위로는 데이터를 내려준다. props 전달
하위에서 상위로는 이벤트를 올려준다. 이벤트 발생

컴포넌트가 데이터를 주고 받을 때 데이터의 흐름을 추적하기 쉽다.

props 속성
상위에서 하위로 데이터를 내려주는 역할을 한다.

props 전달 문법
<컴포넌트명 v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></컴포넌트명>

예시

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

// header의 내용을 변수에 담는다.
var appHeader = {
	template: '<h1>Header</h1>'
  	props: ['propsdata']
    //props 속성과 속성값을 지정해준다.
}

new Vue({
	el: '#app',
  	components: {
    	'app-header': appHeader,
    },
  	data: {
    	message: 'Hi Vue.js',
    }
});

결과

Root의 data의 message 값 : Hi Vue.js

app-header의 props의 propsdata 값: Hi Vue.js

만약 message값을 바꾸면 propsdata의 값도 바뀐다.

propsdata의 값을 template에 담을 수도 있다.
그렇게 하면 template에 담긴 propsdata가 화면에 출력된다.

// header의 내용을 변수에 담는다.
var appHeader = {
  	//<h1>태그 안에 {{}}를 사용해서 propsdata 값을 담는다.
	template: '<h1>{{ propsdata }}</h1>'
  	props: ['propsdata']
        //props 속성과 속성값을 지정해준다.
}

new Vue({
	el: '#app',
  	components: {
    	'app-header': appHeader,
    },
  	data: {
    	message: 'Header',
    }
});