[vue] props

props는 부모컴퍼넌트에서 자식 컴퍼넌트로 값을 전달할떄 사용함

단순 값 전달뿐 아니라 아래의 옵션 설정도 가능하다.

---

props 각종 옵션들

 

- required 필수여부

- default 기본 값

- validator 유효성 검사 함수

 

#type

props: {
  title: {
    type: [String,Number]  //여러가지 타입 허용
  }
}

 

#required

props: {
  title: {
    type: [String,Number],  //여러가지 타입 허용
    required: true          //필수로 전달 받아야함
  }
}

 

#default

props: {
  title: {
    type: [String,Number],  //여러가지 타입 허용
    default: 100            //부모 컴퍼넌트에서 보내주는 값이 없을시 기본값으로 대체
  }
}

props: {
  title: {
    type: Object,
    default: () => {}      //배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함
  }
}

//default: () => { return [1, 2, 3, 4] }
//default: () => { return { abc: 'vasfd' } }

 

#validator 

props: {
  a: {
    type: Array,
    required: true,
    default: () => { return [1, 2, 3, 4] },
    validator: (val) => {
      return val.length > 5
    }
  }
}

---

props 컴퍼넌트간 동기화 하기

 

 

부모 컴퍼넌트에서 props로 넘겨준 값을

바로 자식컴퍼넌트의 input 태그 등에서 v-model로 사용했을때 

Unexpected mutation of "props" prop 란 에러를 마주쳤을것임

 

vue3에서는 props로 넘겨준 값을 바로 v-model로 사용하는것을 권장하지 않음

그래서 props로 넘겨준 값은 아래와 같이 따로 변수로 관리해야함

 

그런데 이렇게 놔둬버리면 부모컴퍼넌트에서 자식컴퍼넌트를 호출했을 당시의

msg변수는 잘 저장이 되겠지만,

부모컴퍼넌트의 input을 이용하여 msg를 변경하였을 시

자식컴퍼넌트의 props안에 있는 msg는 실시간 업데이트 되지 않는다.

 

만일 실시간으로 부모컴퍼넌트에서의 msg 변경을 자식컴퍼넌트에서도 적용되길 원한다면

computed를 이용하여 props 값을 지니면 됨