[Vue.js] Props 란

Props

📢 Props란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되는 단방향 데이터 전달 방식이며
반대 방향으로는 전달되지 않습니다.

또한, 부모 컴포넌트가 업데이트 될 때 마다 자식 요소 prop들도 최신 값으로 업데이트 됩니다.

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

// 자식 컴포넌트
var appHeader = {
    template: '<h1>{{propsdata}}</h1>',
    props: ['propsdata']
}

// 부모 컴포넌트
// 
new Vue({
    el: '#app',
    components: {
        'app-header': appHeader
    },
    nameText: "blackmount22"
})

부모 컴포넌트인 Root 컴포넌트에는 nameText라는 데이터명으로 “blackmount22” 문자열을 갖고 있고, 이를 자식 컴포넌트인 AppHeader 컴포넌트에 데이터를 전달할 수 있습니다.

아래 소스에서 부모 컴포넌트의 nameText 데이터를 자식 컴포넌트의 프롭스 속성 이름인 propsdata에 바인딩 하는 부분입니다.

<app-header v-bind:propsdata="nameText"></app-header>

상위 컴포넌트 (Root 컴포넌트)

하위 컴포넌트 (AppHeader 컴포넌트)

Root 컴포넌트의 nameText: “blackmount22” 값이 AppHeader 컴포넌트의 propsdata에 들어간 것을 확인 할 수 있습니다.

참고

https://kr.vuejs.org/v2/guide/components.html