vue study - props

props : 부모컴포넌트에서 자식컴포넌트에게 전달

 

자식 컴포넌트 - Ninjas.vue

export default {
    props:['ninjas'] // 이렇게 받음
 
  }
}

부모 컴포넌트 - App.vue

    <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>

단순 string을 전달할 때는  ninjas="ninjas"하면 되는데 object 니까 v-bind이용해야 함

 

method에서 접근하기 

    methods:{
        test:function(){
            this.ninjas
        }
    }

 

유효성 검증 

props:{
        ninjas:{
            type:Array, // type이 array인지 확인, 아닐 시에는 오류 발생
            required:true //??전달 되는ㄱ지?
        }
    }

type : 전달되는 데이터의 타입 확인! - 넘어오는 데이터는 ~타입만 가능하다

required : 반드시 필요할 때 사용(부모컴포넌트에서 자식컴포넌트를 사용할 때 반드시 값을 넣어줘야 한다