#5.vue기초 props 활용2

1.userDetail.vue -자식 컴포넌트

<template>
  <div class="red lighten-3 pa-3">
    <h3>More user Info</h3>
    <p>User Name</p>
    <p>{{ChildrenofUser.name}}</p> 
    <p>{{ChildrenofUser.familyName}}</p> 
    <p>{{sayHello}}</p>
    <v-button @click="switchName()" >SwitchName</v-button>
  </div>
</template>
<script>


export default {
 props:{
   ChildrenofUser:{
     type:Object,
     //required:true, //부모컨포넌트에서 반드시 값을 넘겨줘야한다. 
     default:'LEGO'
  }
},

 data: () => ({
      ChildrenofUser: null
  }),
 computed:{
   sayHello(){ //props로 전달받은 데이터는 this를 사용해 현재 컴포넌트에서 정의된 데이터 
   //처럼 활용 가능.
     return "Hi! "+this.ChildrenofUser;
   }
 },
 methods:{
   switchName(){ // 데이터가 변경되지만, 추후에 부모컴포넌트의 값이 변경되면 
   //같이 변경되어 컨포넌트의 독립성을 해침. 
   //자식 컴포넌트에만 변경이 적용되는 게 아니라 부모 컴포넌트에도 변경시켜야 한다. (다음 포스트에서..)
     this.ChildrenofUser ='Computer';
   }
 }
}
</script>

switchName()메소드를 호출하면 자식컴포넌트의 데이터는 변경되지만, 부모 컴포넌트의 데이터는 변경되지 않는 다는 문제점이 있다. 부모 컴포넌트의 데이터도 변경하려면 어떻게 해야할까? -> 다음포스트에서