Standardwerte für Vue-Komponenten-Requisiten und wie kann überprüft werden, ob ein Benutzer die Requisiten nicht festgelegt hat?

1. Wie kann ich den Standardwert für eine Komponentenstütze in Vue 2 festlegen? Zum Beispiel gibt es eine einfache moviesKomponente, die auf diese Weise verwendet werden kann:

<movies year="2016"><movies>



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

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

Wenn ein Benutzer jedoch nicht Folgendes angibt year:

<movies></movies>

dann nimmt die Komponente einen Standardwert für die yearRequisite an.

2. Wie kann am besten überprüft werden, ob ein Benutzer die Requisite nicht eingestellt hat? Ist das ein guter Weg:

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

oder vielleicht das:

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

?

VueErmöglicht es Ihnen, einen Standardwert anzugeben propund typedirekt, indem Sie Requisiten zu einem Objekt machen (siehe: https://vuejs.org/guide/components.html#Prop-Validation ):

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

Wenn der falsche Typ übergeben wird, wird ein Fehler ausgegeben und in der Konsole protokolliert. Hier ist die Geige:

https://jsfiddle.net/cexbqe2q/

Dies ist eine alte Frage, aber in Bezug auf den zweiten Teil der Frage - wie können Sie überprüfen, ob der Benutzer eine Requisite gesetzt hat / nicht gesetzt hat?

Inspektion thisinnerhalb der Komponente haben wir this.$options.propsData. Wenn die Requisite hier vorhanden ist, hat der Benutzer sie explizit festgelegt. Standardwerte werden nicht angezeigt.

Dies ist nützlich in Fällen, in denen Sie Ihren Wert nicht wirklich mit seinem Standardwert vergleichen können, z. B. wenn die Requisite eine Funktion ist.