✅ 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 (상위 컴포넌트 ➡️ 하위 컴포넌트)

props 속성 코드 형식

props 속성을 사용하기 위해서는 하위 컴포넌트의 컴포넌트 내용과 상위 컴포넌트의 템플릿에 각각 코드를 추가해줘야 한다.

// 하위 컴포넌트의 내용
var appHeader = {
  props: ['프롭스 속성 명']
}

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <app-header v-bind:프롭스 속성 명="상위 컴포넌트의 data 속성"></app-header>
</div>

props 속성 코드 예시

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

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'app-header': appHeader,
  },
  data: {
    message: 'hello vue.js',
  },
});

<div id="app">
  <app-header v-bind:propsdata="message"></app-header>
  <!-- 위의 출력 결과는 hello vue.js -->
</div>