Vue.js - props

props란?

: props는 상위 컴포넌트의 데이터를 전달하기 위한 사용자 지정 특성

props 코드

<child v-bind:props 속성 이름="상위 컴포넌트의 데이터 이름"></child>

props 예제

    <div id="app">
        <app-header v-bind:propsdata="message"></app-header>
    </div>
    
    <script>
        var appHeader = {
            template: '<h1>header</h1>',
            props: ['propsdata']
        }
        new Vue({
            el: '#app',
            components : {
                'app-header' : appHeader
            },
            data: {
                message: 'hi'
            }
        });

    </script>

• Vue 컴포넌트가 상위 컴포넌트 - 데이터 이름 : message

• app-header가 하위 컴포넌트 - props 속성 이름 : propsdata
  

    <div id="app">
        <app-header v-bind:propsdata="message"></app-header>
        <app-content v-bind:propsdata="num"></app-content>
    </div>
    
    <script>
        var appHeader = {
            template: '<h1>{{ propsdata }} </h1>',
            props: ['propsdata']
        }
       var appContent = {
            template: '<div>{{ propsdata }}</div>',
            props: ['propsdata']
        }
      
        new Vue({
            el: '#app',
            components : {
                'app-header' : appHeader
            },
            data: {
                message: 'hi',
      		num: 10
            }
        });

    </script>

• {{ props 속성 이름 }} 을 html에 넣으면 상위 컴포넌트의 데이터를 화면에 출력

• 상위 컴포넌트에서 데이터 값을 바꾸면 화면도 같이 바뀜 (reactivity)