Kossie Coder 16. 자식 컴포넌트에 데이터 보내기 (props)

Home에서의 title, About에서의 title을 다르게 하고싶으면?

-> props를 사용하면 된다.

title 안에 어떤 text를 넣을지 props로 넘겨준다.

 

HomeView.vue

<template>
 <div>
  <h1>This is Home page</h1>
  <kossie-coder title="home title" name="Kossie Coder"/>
 </div>
</template>

<script>
import KossieCoder from '@/components/KossieCoder.vue';
export default {
 components: {
  KossieCoder,
 },
 data() {
  return {
   name: 'Kossie Coder',
  }
 }
}
</script>
<style scoped>
h1 {
 color: red;
}

</style>

 

Home을 클릭했을때 나오는 화면.

title이 props로 내려줬던 'home title'이 나온다.

 

 

 

AboutView.vue

<template>
 <div>
  <h1>This is an about page</h1>
  <kossie-coder title="about title" />
 </div>
</template>
<script>
import KossieCoder from "@/components/KossieCoder.vue";
export default {
 components: {
  KossieCoder,
 }
}
</script>

 

About을 클릭했을때 나오는 화면.

title이 props로 내려준 'about title'이 나온다.

 

KossieCoder.vue

<template>
 <div>
  <h1>{{ title }}</h1>
  <p>{{ name }}</p>
  <button @click="updateName">Change Name</button>
 </div>

</template>
<script>
export default {
 // props:["title"], //의미: title을 props로 받을 것이다.대부분의 경우 이렇게 사용하지 않고, props를 object로 사용.
 props: {
 //props는 여러개 받을 수 있다.
  title: {
   type: String, //string이 아니면 다른 type은 받지 않겠다.
   required: true,//무조건 props로 title을 받을 것이다. 받지 않으면 warning뜬다. 무조건 받을게 아니라면 false로.
   default: "default title", //값을 아무것도 받지 않으면 기본 값이 'default title',
  },
  name: {
   type: String,
   default: "default name",
  }
 },
 data() {
  return {
   //name: "Kossie Coder" //props에 name이 있으므로, 다른곳에서 쓰면 안된다.
  }
 },
 methods: {
  updateName(){
   this.name = "Kossie Coder Updated";
   //props는 받은 컴포넌트에서는 직접적으로 변경하면 안된다. 작동은 하는데 warning이 뜬다.
   //여기서 name은 부모 컴포넌트에서 내려주는 props. 부모에서 바꾸고 자식에서 바꾸면 헷갈려할 수 있다. 항상 부모에서 바꿔야.
   //자식 컴포넌트에서 바꾸고싶으면 부모에게 이벤트를 보내서 바꿔달라고 요청할 수 있다. 그 이벤트를 받은 부모가 값을 바꿔서 보낸다.
  }
 
 }

}

</script>
<style></style>

 

 

required:true로 하고 props를 넘겨주지않으면 아래와 같은 경고가 뜬다.

 

이렇게 숫자로 못보낸다. 저장하면 다시 string으로 변경된다. (ex: title="5")

<kossie-coder title=5 />

그래서 data()에서 넘겨줘야한다.(ex: :title="title")

 

 

props의 type이 잘못되어도 warning이 뜬다.

 

 

props를 직접적으로 바꾸면 아래와같은 warning이 뜬다.