[Vue.js] Props

Props란?

Props : 부모의 데이터를 자식에게 전달해줄 때 사용된다. 상위 컴포넌트 -> 하위 컴포넌트

사용 이유

여러개의 .vue 파일로 나뉘어졌는데, 각각의 파일로 '데이터'를 보내기가 어렵다. 부모 자식간의 변수('상태')를 효율적으로 공유하기 위해 props를 사용합니다.

부모에게 자식(자손)들 달아주기!

Home view (할아버지) -> Home Child(자식) -> Home Grand Child(손자)
다음과 같이 달아줘 보자!
자손들은 최상단 부모가 아니기 때문에 views폴더 내가 아닌 componets파일에 만들어줘야한다!

Home.vue

<template>
  <div class="home">
    <h1>할아버지</h1>
    <!-- compoents 붙이기 -->
    <HomeChild/>
  </div>
</template>

<script>
// compents 파일 가져오기
import HomeChild from "../components/HomeChild.vue";
export default {
  name: "Home",
  // compents 등록
  components:{
    HomeChild
  }
}
</script>

<style scoped>

</style>

HomeChild.vue

<template>
  <div class="home">
    <h1>자식</h1>
    <!-- 이 때 부모와 자식 관계가 생성된다 -->
    <HomeGrandChild/>
  </div>
</template>

<script>
import HomeGrandChild from "../components/HomeGrandChild.vue";
export default {
  name: "HomeChild",
  components: {
      HomeGrandChild
  }
}
</script>

<style scoped>

</style>

HomeGrandChild.vue

<template>
  <div class="home">
    <h1>손자</h1>
  </div>
</template>

<script>
export default {
  name: "HomeGrandChild",
}
</script>

<style scoped>

</style>

자식에게 데이터 넘겨주기!

각각의 components들은 독립적인 데이터를 지닌다.
이제부터 할아버지(부모/최상위)가 가지고 있는 data를 상태(State)라고 명칭하겠습니다.

상태는 25라는 내용을 자손한테 주기 위해서는 다음과 같이 코드를 작성해야합니다.
Home.vue

<template>
  <div class="home">
    <h1>할아버지</h1>
    <!-- 자식에 상태(State)를 '단방향'으로 전송 -->
    <!-- v-bind: 보낼 상태명 = "상태" -->
    <HomeChild v-bind:mySchoolProp = "mySchool"/>
  </div>
</template>

<script>
import HomeChild from "../components/HomeChild.vue";
export default {
  name: "Home",
  components:{
    HomeChild
  },
  data(){
    return{
      myage : "25",
    }
  },
  created(){
    console.log(this.myage);
  }
}
</script>

<style scoped>

</style>

v-bind : 태그 속성을 바꿀 때 사용되지만, 자식에게 데이터를 넘겨줄 때에도 사용된다.
그럼 자식은 받기위한 함수들을 작성해야합니다.
HomChild.vue

<template>
  <div class="home">
    <h1>자식</h1>
    <HomeGrandChild/>
  </div>
</template>

<script>
import HomeGrandChild from "../components/HomeGrandChild.vue";
export default {
  name: "HomeChild",
  components: {
      HomeGrandChild
  },
    // 부모에서 보내오는 상태 받기! 
    // 여러 상태를 받아올 수 있기에 배열형태  
  props : ['mySchoolProp'],
  created(){
      // props로 받아오지 않았다면 undefined
      console.log(this.mySchool);
  }
}
</script>

<style scoped>

</style>

정리 :
실제 데이터는 부모가 가지고 있는 것이고, 자손과 연결만 하여 데이터를 사용할 수 있도록 한것입니다.
props -> 단방향 : 부모에서 자식에게만 데이터를 전송해줄 수 있고, 자식은 해당 데이터를 수정하지 못한다.