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

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
}

?

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/

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.