vue2 props

vue2에서 props를 사용해보자

부모.vue
<friend-contact 
name:'Manual Lorenz'
phone-number:'01234 5678'
email-address:'manul@host.com'
></friend-contact>

자식.vue
props:[
  'name',
  'phoneNumber',
  'emailAddress',
]

{{emailAddress} 이런 식으로 바로 사용 가능 


만약 props로 만든 변수를 변경한다면?
  바로 변경은 안되고, 새로운 변수에 할당을 한뒤 변경을 해야한다.


newEmailAddress = this.emailAddress

newEmailAddress의 값을 변경하면됨

props를 객체화 할 수 있음

props:{

 name:{
   type:String,
   required:true
},
 phoneNumber:{
   type:String,
   required:true
},
  emailAddress:{
    type:String,
    required:true
  }

}

동적으로 props를 내려보자

부모.vue

<friend-contact
v-for="friend in friends" 
:key="friend.id"
:name="friend.name"
:phone="friend.phone"
/>
  

자식.vue
<h2>아이디 : {{friend.id}}</h2>
<h2>이름 : {{friend.name}}</h2>