[Vue.js] 자식 컴포넌트에 데이터 보내기 (Props)

• Props
  • props 여러개 받을 수 있음
  • props를 다른 곳에서 쓰면 안됨 (ex. props로 name을 쓰고싶다면 data에서 name을 사용하면 안된다)
  • 받은 props는 받은(자식) component에서 직접적으로 변경해주면 안됨
  • props는 부모 component에서 보내주는 데이터. 따라서 양쪽에서 바꾸면 헷갈림
  • props를 변경하고 싶을 때에는 부모로 event를 보내서 바꿔달라고 요청 후 evnet를 받은 부모가 바꿔주는 형식으로 해야함
• 코드 구현 (Jione.vue)
  

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ name }}</p>
    <br>
    <!-- <button @click="updateName">Change name</button> -->
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true //props 무조건 받아야함.
    },
    name: {
      type: String,
      default: 'default name'
    },
  },  
};
</script>
<style scoped>
</style>

 

• Home.vue

<template>
  <div>
    <h1>This is Home Page!</h1>
    <Jione title="This is home title" name="jione"/>
  </div>
</template>
<script>
import Jione from '@/components/Jione.vue';

export default {
  components: {
    Jione
  },
};
</script>
<style scoped>
h1 {
  color: royalblue;
}
</style>

 

• 실행 화면