props

부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 데이터입니다.

props는 props 옵션을 사용하여 선언됩니다

export default {
  props: ['foo'],
  created() {
    // props는 `this`에 노출됩니다.
    console.log(this.foo)
  }
}

문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 선언 문법을 사용할 수도 있습니다

export default {
  props: {
    title: String,
    likes: Number
  }
}

Props 이름 케이싱

긴 속성명을 선언할 때 obj['kebab-case']와 같이 키에 따옴표를 사용하는 번거로움을 줄이기 위해, obj.camelCase와 같이 camelCase를 사용합니다.

export default {
  props: {
    greetingMessage: {
    type: String,
    required:true,
    }
  }
}

<MyComponent greeting-message="안녕!" />

props 옵션에서 디테일한 설정이 가능합니다:

• type: 전달받을 데이터 타입을 제한합니다.
• default: 기본값을 설정합니다.
• required: 해당 prop이 반드시 전달되어야 하는지 여부를 설정합니다.
• validator: 전달된 값이 유효한지 검사하는 함수입니다.

단방향 데이터 흐름

모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성합니다.
부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됩니다.

Prop 유효성 검사

컴포넌트는 props에 타입을 지정할 수 있습니다.
지정한 요구 사항이 충족되지 않으면 Vue는 브라우저의 JavaScript 콘솔에서 경고합니다.

   props: {
     validator(value, props) {
       // 값은 이 문자열 중 하나와 일치해야 합니다
       return ['성공', '경고', '위험'].includes(value)
     }
   },

불리언 캐스팅

Boolean 타입의 props는 네이티브 불리언 속성의 동작을 모방하는 특별한 캐스팅 규칙이 있습니다.

export default {
  props: {
    disabled: Boolean
  }
}

<!-- :disabled="true" 같음 -->
<MyComponent disabled />

<!-- :disabled="false" 같음 -->
<MyComponent />

여러 타입을 허용하도록 프롭(prop)을 선언할 때, Boolean에 대한 캐스팅 규칙도 적용됩니다.
그러나 String과 Boolean이 모두 허용되는 경우에는 주의해야 합니다 - Boolean 캐스팅 규칙은 String보다 앞에 위치해야만 적용됩니다

// disabled는 true로 캐스팅됩니다
export default {
  props: {
    disabled: [Boolean, Number]
  }
}