📌 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 할 땐 '콜론'을 붙이면 안된다.
'Vue3 > 코딩애플 part1' 카테고리의 다른 글
[Vue/코딩애플/part1] 10. input (v-model), watcher (0) | 2024.07.29 |
---|---|
[Vue/코딩애플/part1] 9. custom event (자식이 부모 데이터 바꿀 때) (0) | 2024.07.29 |
[Vue/코딩애플/part1] 7. 컴포넌트(Component) / 컴포넌트 파일명 한 단어로 가능하게 하는 방법 (0) | 2024.07.29 |
[Vue/코딩애플/part1] 6. 모달창에 상세 페이지 만들기 / v-if, v-else, v-else-if 문 (0) | 2024.07.29 |
[Vue/코딩애플/part1] 5. 실제 데이터 넣어 상품 목록 만들기 (import / export) (0) | 2024.07.26 |