[Vue.js] props 받을 자료형 지정

props 로 받을 자료형은 지정하는 것이 좋다. 

지정한 자료형이 아닌 값일 경우, 에러를 쉽게 찾을 수 있다. 

 

Vue.component('child-component', {
    props: {
        val: String //문자열 자료형의 데이터만 허가
    }
})

 

props는 받을 자료형 이외에도 디폴트값 지정도 가능함. 

 

▼ Vue.js 공식 가이드에 나와있는 props 샘플

Vue.component('child-component', {
    props: {
        //기본적인 자료형 확인('null' 은 어떤 자료형에서도 받을 수 있음)
        propA: Number,
        //여러 개의 자료형을 지정할 수도 있음
        propB: [String, Number],
        //필수 문자열
        propC: {
            type: String,
            required: true
        },
        //디폴트값
        propD: {
            type: Number,
            default: 100
        },
        //객체와 배열의 디폴트값 //팩토리 함수를 사용해서 리턴하는 형태를 사용
        propE: {
            type: Object,
            default: function(){
                return { message: 'hello' }
            }
        },
        //사용자 정의 유효성 검사 함수
        propF: {
            validator: function(value){
                return value > 10
            }
        }
    }
})