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

139

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
}

?

javascript vue.js vue-component PeraMika
quelle

Antworten:

231

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/

craig_h
quelle
2
Was ist mit der zweiten Frage (dies ist mehr JavaScript-Frage): Wie kann am besten überprüft werden, ob ein Benutzer die Requisite nicht festgelegt hat? Ist das ein guter Weg: if (this.year != null) oder vielleicht das: if (!this.year)oder? Vielen Dank!
PeraMika
1
Wenn Sie einen Standardwert die Stütze festgelegt wird immer dann gesetzt werden , wenn Sie den Standard festlegen null. Wenn es das ist, was Sie brauchen, um eine andere Logik auszuführen, if (this.year != null)oder if (!this.year)der richtige Weg ist.
craig_h
36

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.

aurumpotestasest
quelle