vue options정리-2 (props)

type: Array<string> | Object

 

options

• type : 기본생성자 타입 모두 가능하고 커스텀한 생성자 타입도 가능합니다!
  • types: String, Number, Boolean, Array, Object, Date, Function, Symbol...
• default: prop의 기본값을 설정합니다.
  • types: any
• required: prop의 필수 여부를 정의합니다.
  • types: Boolean
• validator:사용자 정의 유효성 검사 함수입니다.
  • types:Function

설명

부모 컴포넌트의 데이터를 얻기 위한(exposed to accept) 리스트/해쉬 속성입니다. 배열 기반의 단순한 문법과 형 검사, 사용자 정의 유효성 검사와 기본값 같은 고급 구성을 허용하는 객체 기반의 문법이 있습니다.

 

Ex>

 

array type

const app = Vue.createApp({})

// 단순한 문법
app.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

object type

const app = Vue.createApp({})

// 검증기능을 포함하는 객체 문법
app.component('props-demo-advanced', {
  props: {
    // 타입 체크
    height: Number,
    // 타입 체크 + 추가 검증
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: value => {
        return value >= 0
      }
    }
  }
})