[ VUE ] props속성 - 부모에서 자식으로 데이터 전송

vue - src 구조

 

1. App.vue  ( 부모 컴포넌트 )

<template>
  <div id="app">
    <!-- 자식(Person)에게 넘겨줄 값지정 -->
    <Person 
      username="펭수" 
      v-bind:age="20" 
      my-address="서울"
      isMarried v-bind:isMarried2 = "false"
      v-bind:phones="[100, 200, 300]"
      v-bind:author= "{
        name: 'Veronica',
        company: 'Veridian Dynamics'
      }"
    />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Person
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

---

 

components  /  Person.vue ( 자식 컴포넌트 )

<template>
  <div class="hello">
    <h1>{{ username }}</h1>
    <ul>
      <li>{{ age }}</li>
      <li>{{ myAddress }}</li>
      <li>{{ isMarried }}</li>
      <li>{{ isMarried2 }}</li>
      <li>{{ phones }}</li>
      <li>{{ author.name }}</li>
      <li>{{ author.company }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Person',
  props: { // 부모로부터 넘어 오는 값의 타입정의
    username: String,
    age: Number,
    myAddress: String, // 카멜표기법 주의
    isMarried: Boolean,
    isMarried2: Boolean, 
    phones: Array,
    author: Object
  }
}
</script>

<style scoped>
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

</style>

 

※주의!

  props에서 받는 값의 타입을 정의하지 않으면 오류발생!!  

 

---

 

기본 구조 완성 하였으면 터미널에서

yarn serve 하여 확인!