[vue] props

부모컴포넌트에서 자식으로 보낼때 쓰는게 props

props는 readOnly임

 

1. 부모에서 vbind

2. 자식에서 props 선언

3. 자식 template에서 가져다쓰면됨

부모
<Modal :data ="data"/>

자식

<template>
    <div>
        {{data}}
    </div>
</template>
<script>
export default {
    name: 'Modal',
    props: {
        data: Object //props에 오는 형식으로 맞춰쓰면됨 틀리다고 실행에 오류가 나진 않음, 콘솔에 잘못된 타입이라고 표시됨
    }
}
</script>
<style></style>

관련설명)

이는 컴포넌트를 읽기 좋게 문서화할 뿐 아니라 브라우저의 자바스크립트 콘솔에서도 잘못된 타입이 전달된 경우 경고를 띄워줄 수 있도록 해줍니다. 페이지 아래에 있는 타입 체크와 prop 유효성 검사 에서 조금 더 자세한 내용을 확인할 수 있습니다.

https://v2.ko.vuejs.org/v2/guide/components-props.html#Prop-Validation

Props — Vue.js

 

 

팁) 컴포넌트를 만들때 중요시 해야하는 것

부모와 자식둘다 데이터가 쓰인다면 부모에서 데이터를 받아와야함

왜냐하면 데이터가 부모에서 자식으로 보내는것은 props를 통해 간단하게 보낼 수 있음

하지만 자식에서 부모로 보내려면 이벤트 써야하고 복잡함