Vue 컴포넌트 소품의 기본값 및 사용자가 소품을 설정하지 않았는지 확인하는 방법은 무엇입니까?

Vue 컴포넌트 소품의 기본값 및 사용자가 소품을 설정하지 않았는지 확인하는 방법은 무엇입니까?

---

1. Vue 2에서 컴포넌트 prop의 기본값을 어떻게 설정하나요? 예를 들어 다음과 movies같이 사용할 수 있는 간단한 구성 요소가 있습니다.

<movies year="2016"><movies>



Vue.component('movies', {
    props: ['year'],

    template: '#movies-template',
    ...
}

그러나 사용자가 다음을 지정하지 않으면 year:

<movies></movies>

그러면 컴포넌트는 year소품에 대한 일부 기본값을 사용합니다 .

2. 또한 사용자가 소품을 설정하지 않았는지 확인하는 가장 좋은 방법은 무엇입니까? 이것이 좋은 방법입니까?

if (this.year != null) {
    // do something
}

또는 아마도 이것은 :

if (!this.year) {
    // do something
}

?

---

Vueprops를 객체로 만들어 기본값 prop을 type직접 지정할 수 있습니다 (참조 : https://vuejs.org/guide/components.html#Prop-Validation ) :

props: {
  year: {
    default: 2016,
    type: Number
  }
}

잘못된 유형이 전달되면 오류가 발생하고 콘솔에 기록됩니다. 여기 바이올린이 있습니다.

https://jsfiddle.net/cexbqe2q/

---

이것은 오래된 질문이지만 질문의 두 번째 부분과 관련하여 사용자가 소품을 설정 / 설정하지 않았는지 어떻게 확인할 수 있습니까?

this구성 요소 내에서 검사 하면 this.$options.propsData. 여기에 소품이 있으면 사용자가 명시 적으로 설정 한 것입니다. 기본값은 표시되지 않습니다.

이것은 prop이 함수 인 경우와 같이 값을 기본값과 실제로 비교할 수없는 경우에 유용합니다.

참고 URL : https://stackoverflow.com/questions/40365741/default-values-for-vue-component-props-how-to-check-if-a-user-did-not-set-the