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

Question

1. Comment puis-je définir la valeur par défaut d'un composant prop dans la Vue 2? Par exemple, il est un simple movies composant qui peut être utilisé de cette façon:

<movies year="2016"><movies>



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

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

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

<movies></movies>

ensuite, le composant va prendre la valeur par défaut pour l' year prop.

2. Aussi, quelle est la meilleure façon de vérifier si un utilisateur n'a pas défini l'prop? Est-ce une bonne façon:

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

ou peut-être ceci:

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

?

Answer 1

Vue vous permet de spécifier une valeur par défaut prop de la valeur et type directement, par la fabrication d'accessoires d'un objet (voir: https://vuejs.org/guide/components.html#Prop-Validation):

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

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

https://jsfiddle.net/cexbqe2q/

Answer 2

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?

Contrôle this dans la composante, nous avons this.$options.propsData . Si l'accessoire 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 l'accessoire est une fonction.