Vue 3 ) Props

Props

props 는 컴포넌트에 데이터를 넘겨줄 수 있는 사용자 지정 속성입니다.

컴포넌트를 생성할 때 props 옵션을 이용해 어느 이름의 props 데이터를 받을지 결정하게 됩니다.

일반적으로 props 라는 옵션에 Props로 넘어오는 속성의 키 값들을 배열로 지정하면 사용에 큰 문제가 없습니다.

props: ["name", "age"]

하지만 어떤 컴포넌트는 특정한 Props 를 필요로 할 수도 있고, 정해진 데이터 타입에 맞게 들어왔는지 확인이 필요할 수도 있습니다.
이럴 때는 props 옵션의 값을 배열 대신 객체로 변경하고 각 Props 데이터의 상세 내용을 지정해주면 됩니다.

type	데이터 타입을 정의합니다.
default	해당 Props 가 들어오지 않을 경우 사용할 기본값을 가지게 됩니다.
required	true 로 설정되고 Props 가 안들어오면 콘솔에 경고를 내보냅니다. 만약 default 가 설정되어 있으면 default 값이 쓰여 경고를 내보내지 않습니다.
validator	잘못 들어온 인자를 개발자 코드로 직접 검사해 콘솔창에 경고를 낼 수 있습니다.

Props 는 어떻게 넘겨주나요?

• MyComponent 컴포넌트에 String 타입의 title 과 arr 라는 배열을 Props 로 넘기는 방법은 아래와 같습니다.

<my-component title="Component 1" :arr="[1,2,3]"></my-component>

• v-bind 또는 콜론 ( : ) 을 이용하면 데이터 그 자체를 보낼 수 있습니다.
• 위에서 arr Props 는 객체를 받으므로, v-bind 디렉티브 없이 사용하면 [1,2,3] 이라는 문자열이 전달되기 때문에 v-bind 디렉티브를 반드시 이용해야 합니다.

Props 를 받을 때는 ??

app.component('MyComponent',{
  props:{
    title: {
      type: String,   // 문자열 타입
      required: true, // Props 가 넘어오지 않으면 콘솔창에 경고 뜨게 함
      validator: function (value) {
        return typeof value == String   // Props 의 타입을 직접 검사
      },
    },


    arr: {
      type: Object,   // 객체 타입
      default: ()=>{
        return []     // Props 가 들어오지 않았을 경우 빈 배열 객체를 반환
      },
    },
  },
})