[Vue.js] props

👉 props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때
사용되어지는 단방향 데이터 전달 방식

<div id="app">
	<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
	<app-header v-bind:propsdata="message"></app-header>
</div>
 <script>
    var appHeader = {
        template: '<h1>{{propsdata}}</h1>',
        props: ['propsdata']
    }

    var appContent = {
        template: '<div>{{number}}</div>',
        props: ['number']
    }

    new Vue({
        el: '#app',
        components: {
            'app-header': appHeader,
            'app-content': appContent
        },
        data: {
            message: 'hi',
            num: 10
        }
    })
  </script>

🙌 말로 풀어보기

상위 컴포넌트 : Vue
하위 컴포넌트 : appHeader, appContnet

상위 컴포넌트가 가지고 있는 data {message, num} 속성을
하위 컴포넌트에 뿌려주고 싶음

뿌려줄 컴포넌트에 props를 정의하고 배열을 생성하여 이름을 넣음