Valeurs par défaut pour les accessoires du composant Vue et comment vérifier si un utilisateur n'a pas défini l'accessoire?

139

1. Comment puis-je définir la valeur par défaut d'un accessoire de composant dans Vue 2? Par exemple, il existe un moviescomposant simple qui peut être utilisé de cette manière:

<movies year="2016"><movies>



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

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

Mais, si un utilisateur ne spécifie pas year:

<movies></movies>

alors le composant prendra une valeur par défaut pour l' yearaccessoire.

2. De plus, quelle est la meilleure façon de vérifier si un utilisateur n'a pas défini l'accessoire? Est-ce un bon moyen:

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

ou peut-être ceci:

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

?

javascript vue.js vue-component PeraMika
la source

Réponses:

231

Vuepermet de spécifier une propvaleur par défaut et typedirectement, en faisant des accessoires un objet (voir: https://vuejs.org/guide/components.html#Prop-Validation ):

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

Si le mauvais type est passé, il génère une erreur et le consigne dans la console, voici le violon:

https://jsfiddle.net/cexbqe2q/

craig_h
la source
2
Qu'en est-il de la deuxième question (c'est plus une question JavaScript): quelle est la meilleure façon de vérifier si un utilisateur n'a pas défini l'accessoire? Est-ce un bon moyen: if (this.year != null) ou peut-être ceci: if (!this.year)ou? Merci!
PeraMika
1
Si vous définissez une valeur par défaut, la prop sera toujours définie, sauf si vous définissez la valeur par défaut sur null. Si c'est ce dont vous avez besoin pour exécuter une autre logique if (this.year != null)ou if (!this.year)c'est la voie à suivre.
craig_h
36

C'est une vieille question, mais concernant la deuxième partie de la question - comment pouvez-vous vérifier si l'utilisateur a défini / n'a pas défini d'accessoire?

Inspection thisau sein du composant, nous avons this.$options.propsData. Si le prop est présent ici, l'utilisateur l'a explicitement défini; les valeurs par défaut ne sont pas affichées.

Ceci est utile dans les cas où vous ne pouvez pas vraiment comparer votre valeur à sa valeur par défaut, par exemple si le prop est une fonction.

aurumpotestasest
la source