Props

Props 프롭스

• Properties의 약자로 부모컴포넌트로부터 자식컴포넌트가 데이터를 받기 위해 사용하는 속성이다.
• 자식컴포넌트에 props:[프롭스이름]을 정의하고, 가져올 상위 컴포넌트 '데이터이름을' 매칭한다.
• v-bind:프롭스속성이름="상위컴포넌트데이터이름" 로 데이터를 불러오고 {{ 프롭스이름 }}으로 데이터 사용

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

<script>
  var appHeader = {
    template: '<h1>{{ propsdata }}</h1>', // 프롭스 이름으로 데이터 사용
    props: ['propsdata'] // 하위 컴포넌트 프롭스 이름 정의
  }

  new Vue({
    el: '#app',
    components: {
      'app-header': appHeader
    },
    data: {
      message: 'hi' // 상위 컴포넌트 데이터
    }
  });
<script>

• v-bind를 통해 propsdata에 message 데이터를 넘기고, 하위 컴포넌트에서는 그 propsdata를 사용