Vue 구성 요소 소품에 대한 기본값 및 사용자가 프로펠러를 설정하지 않았는지 확인하는 방법

Vue 구성 요소 소품에 대한 기본값 및 사용자가 프로펠러를 설정하지 않았는지 확인하는 방법

1. Vue 2에서 구성 요소 프로펠러의 기본값을 설정하는 방법은? 예를 들어 간단한 방법이 있다.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
}

?

Vue기본값을 지정할 수 있음prop가치와type직접 소품을 개체로 만드는 방법(https://vuejs.org/guide/components.html#Prop-Validation) 참조:

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

잘못된 유형을 통과하면 오류가 발생하여 콘솔에 기록되며, 다음과 같이 하십시오.

https://jsfiddle.net/cexbqe2q/

이것은 오래된 질문이지만, 질문의 두 번째 부분에 대해 - 사용자가 소품을 설정했는지/설정하지 않았는지 어떻게 확인할 수 있는가?

검사 중this구성 요소 내에서this.$options.propsData. 프로펠러가 여기에 있으면 사용자가 명시적으로 설정한 것이며, 기본값은 표시되지 않는다.

이것은 예를 들어, 프로펠러가 함수인 경우와 같이 자신의 값을 기본값과 실제로 비교할 수 없는 경우에 유용하다.

또한 여기에 추가해야 할 중요한 사항으로, 어레이 및 개체의 기본값을 설정하려면 소품 기본 기능을 사용해야 한다.

propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },

전달된 값이 구성 요소별 요구 사항과 일치하도록 하기 위해 이와 같은 모든 받침대에 사용자 정의 검증기 기능을 추가할 수도 있다는 점을 언급할 필요가 있다.

props: {
  year: {
    type: Number,
    required: true
    validator (value) {
      return value > 2015
    }
  }
}

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