[Vue/코딩애플/part1] 8. props

📌 Props

App.vue 안에 Modal.vue 라는 파일이 하위 컴포넌트로 있다고 하면,

App.vue 는 부모 컴포넌트, Modal.vue는 하위 또는 자식 컴포넌트라고 한다.

 

자식 컴포넌트가 부모 컴포넌트의 데이터를 쓰려면 props 라는 문법을 이용해야 한다.

// 부모 컴포넌트에서
<자식컴포넌트명 :{작명}="보낼데이터">

 

예시 코드에서는

<Modal :prodList="prodList"/>

 

로 작성하면 된다.

 

그리고 나서 자식 vue 파일에서 props 등록을 해야 한다.

// 자식 컴포넌트에서
props: {
    {작명}: 데이터타입
  }

 

props: {
    prodList: Array
  }

 

데이터 타입은 Array, Object, String, Number 등이 있다. 보내는 자료형에 맞게 입력하면 된다.

 

이제 props 로 등록한 데이터는 HTMl 안에서 데이터 바인딩으로 자유롭게 사용 가능하다.

 

 

⚡ 자식 컴포넌트가 props 받은 데이터는 read-only 이다. 수정하면 에러남!

 

필요한 데이터들을 props 로 다 전송하였다.

<Modal :prodList="prodList" :prodId="prodId" :isModal="isModal"/>

 

// 자식 컴포넌트 Modal.vue
<script>
export default {
  name: 'Modal',
  props: {
    prodList: Array,
    prodId: Number,
    isModal: Boolean
  }
}
</script>

 

📌 props 보내는 여러가지 방법

<자식컴포넌트명 :데이터이름="[1,2,3]" />
<자식컴포넌트명 :데이터이름="{ age:20 }" />
<자식컴포넌트명 :데이터이름="100" />
<자식컴포넌트명 데이터이름="안녕하세요" /> // 주의: 콜론 X

 

부모 컴포넌트에 등록된 데이터가 아니더라도 props 를 보낼 수 있다.

array, object, 숫자, 문자 형식으로 직접 props 할 수 있다.

 

⚡  문자형식으로 props 할 땐 '콜론'을 붙이면 안된다.