[ VUE ] props속성2 - 부모에서 자식으로 데이터 전송 ( default 지정)

vue - src구조

 

 

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

<template>
  <div id="app">
    <Person
      username = "펭수"
      age = 5
      address = "EBS 소품실 한구석"
    />
    
    <!-- age와 address를 지정하지않음 -->
    <Person
      username = "뽀로로" 
    />
  </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>
    <p>{{ username }} , {{ age }} , {{ address }}</p>
  </div>
</template>

<script>
export default {
  name: 'Person',
  props: {
    username: String,
    age: {
      type: Number,
      default: 100 // 받는 데이터가 없을 경우의 default값지정 가능
    },
    address: {
      type: String,
      default: '제주' // 받는 데이터가 없을 경우의 default값지정 가능
    }
  }
}
</script>

<style scoped>
</style>

 

 

---

 

완성 하였으면 터미널에서

 yarn serve  하여 확인!

 

---

 

yarn serve로 출력된 화면