[Age of Vue] Vue.js 시작하기 - 31. 싱글 파일 컴포넌트 생성하여 배운 내용 적용해보기 (2)

AppHeader.vue에 App.vue에서 정의한 data를 props로 내려보자.

---

AppHeader.vue

<!-- 컴포넌트는 대문자로 시작하는 최소 두 단어로 조합 (html 기본 태그와 헷갈릴 수 있으므로)-->
<template>
  <header>
      <h1>Header</h1>
      <!-- App.vue에서 props 데이터로 넘어온 값이 자동으로 들어옴-->
      <h1>{{ propsdata }}</h1>
  </header>
</template>

<script>
export default {
    //인스턴스 옵션
    //1.propsdata라는 이름의 배열에 상위컴포넌트에서 내려온 props data담는다.
    props : ['propsdata']
}
</script>

<style>

</style>

 

App.vue

<template>
  <!-- template에는 html element가 최상위 1개만 있어야한다 -->
  <div>
    {{ str }}
    <!--
            //AppHeader.vue에서 정의한 이름="App.vue(상위 컴포넌트)의 데이터 이름"
      <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
      str이라는 data가 왼족의 프롭스로 담겨 내려감
    -->
              <!-- 2. AppHeader.vue에서 정의한 이름인 propsdata를 넣어줌 -->
    <app-header v-bind:propsdata="str"></app-header>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  data : function() {
    return {
      str : 'Header'
    }
  },
  components : {
    //내가 정의한 컴포넌트 변수 : 내가 정의한 import 변수
    'app-header' : AppHeader
  }
}
</script>

<style>
</style>

---