web-dev-qa-db-fra.com

Valeurs par défaut de Vue accessoires de composant & comment vérifier si un utilisateur n'a pas défini l'accessoire?

1. Comment définir la valeur par défaut d'un accessoire de composant dans Vue 2? Par exemple, il existe un simple composant movies 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 la year:

<movies></movies>

alors le composant prendra une valeur par défaut pour le year prop.

2. Aussi, quel est le meilleur moyen de vérifier si un utilisateur n'a pas configuré l'accessoire? Est-ce une bonne façon:

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

ou peut-être ceci:

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

?

javascriptvue.jsvue-component
102
PeraMika

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

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

Si le mauvais type est passé, alors une erreur est générée et enregistrée dans la console, voici le violon:

https://jsfiddle.net/cexbqe2q/

183
craig_h

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?

En inspectant this dans le composant, 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.

22
aurumpotestasest