Vue - 컴포넌트 Props

하위 컴포넌트는 상위 컴포넌트에서 데이터를 받을 때 props를 통해서 전달받는다.

하지만 상위 컴포넌트에서 전달받은 데이터를 하위 컴포넌트에서 수정하려고 하면 에러가 발생한다.

그럼 전달받은 prop은 어떻게 수정을 할까?

첫번째로는 상위 컴포넌트에서 받은 데이터를 현재 컴포넌트의 데이터에 할당하는 것이다.

그리고 현재 컴포넌트에서는 이 할당된 데이터를 사용한다.
그럼 상위 컴포넌트에는 데이터가 변경되어도 영향이 가지 않는다.

props를 받을 때 객체 리터럴을 사용해서 타입을 지정할 수 있다.

null과 undefined는 모든 타입 유효성 검사를 통과한다.

객체를 전달할 때 이렇게 하나씩 나열해서 원하는 prop을 전달할 수 있지만

v-bind로 한번에 전달할 수 있다.

prop이 전달되지 않았을 시 적용 할 기본값을 지정할 수 있다.
eslint 사용 시 기본값을 지정하지 않으면 경고가 발생한다.

객체나 배열의 기본 값은 항상 팩토리 함수로부터 반환되어야 한다.
팩토리 함수: 참조형 데이터를 반환하는 함수

arr: {
	type: Object,
	default: function() {
  		return { message: "hello" }
	}
}

함수는 기본값으로 함수를 지정해야 한다.

clickFun: {
	type: Function,
	default: function() {
  		return "Default function"
	}
}

required 옵션을 사용하여 필수 여부를 지정할 수 있다.

prop: {
	type: String,
    required: true
},

validator 옵션을 사용하여 커스텀 유효성 검사를 적용할 수 있다.

prop: {
  validator: function(value) {
    // 값이 세 문자열 중 하나와 일치해야 한다.
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }

html에서 속성으로 작성할 때는 kebab-case
props 옵션에서는 camelCase로 작성해야한다.