[Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용

App.vue

<template>
  <div>
    app
		<!-- v-bind 디렉티브로 하위컴포넌트의 props 속성값 propsdata에 str을 연결 -->
    <app-header v-bind:propsdata="str"></app-header>
  </div>    
</template>

<script>

import AppHeader from './components/AppHeader.vue';

export default {
  components: {
    'app-header': AppHeader
  },
  data: function() {  
    return {
      str: '부모의 글씨'
    }
  },
}
</script>

<style>
</style>

AppHeader .vue

<template>
    <header>
			<!-- 상위에서 전달한 str 데이터를 받은 propsdata값 -->
      <h1>{{ propsdata }}</h1>
      <!-- 기타 헤더 컨텐츠들 -->
    </header>
  </template>
  
  <script>
  export default {
		//props속성값에 'propsdata' 추가(상위에서 전달한 props 받는 역할)
    props: ['propsdata']
  };
  </script>
  
  <style>
  /* 스타일링 옵션들 */
  </style>

reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21465&tab=curriculum 

학습 페이지