Accessoires de composants Vue.js

Les accessoires sont utilisés pour transmettre l'état aux composants enfants. Apprenez tout sur eux

Définir un accessoire à l'intérieur du composant

Les accessoires sont la manière dont les composants peuvent accepter les données des composants qui les incluent (composants parents).

Lorsqu'un composant attend un ou plusieurs accessoires, il doit les définir dans sonpropsbiens:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

ou, dans un composant de fichier unique Vue:

<template>
  <p>{{ name }}</p>
</template>

<script> export default { props: [‘name’] } </script>

Accepter plusieurs accessoires

Vous pouvez avoir plusieurs accessoires en les ajoutant au tableau:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Définir le type d'accessoire

Vous pouvez spécifier le type d'un accessoire en utilisant un objet au lieu d'un tableau, en utilisant le nom de la propriété comme clé de chaque propriété et le type comme valeur:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Les types valides que vous pouvez utiliser sont:

  • Chaîne de caractères
  • Nombre
  • Booléen
  • Déployer
  • Objet
  • Date
  • Fonction
  • symbole

Lorsqu'un type ne correspond pas, Vue alerte (en mode développement) dans la console avec un avertissement.

Les types d'accessoires peuvent être plus articulés.

Vous pouvez autoriser plusieurs types de valeur différents:

props: {
  firstName: [String, Number]
}

Définir un accessoire comme obligatoire

Vous pouvez exiger qu'un accessoire soit obligatoire:

props: {
  firstName: {
    type: String,
    required: true
  }
}

Définir la valeur par défaut d'un accessoire

Vous pouvez spécifier une valeur par défaut:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

Pour les objets:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

defaultpeut également être une fonction qui renvoie une valeur appropriée, plutôt que d'être la valeur réelle.

Vous pouvez même créer un validateur personnalisé, ce qui est cool pour les données complexes:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

Passer des accessoires au composant

Vous passez un accessoire à un composant en utilisant la syntaxe

<ComponentName color="white" />

si ce que vous passez est une valeur statique.

S'il s'agit d'une propriété de données, vous utilisez

<template>
  <ComponentName :color=color />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

Vous pouvez utiliser un opérateur ternaire à l'intérieur de la valeur prop pour vérifier une condition de vérité et passer une valeur qui en dépend:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: