2. Props & injection

Présentation

Dans ce chapitre, nous allons voir comment fournir certaines données à un composant lors de son utilisation ainsi que les différentes façons d’injecter ces données dans la structure HTML de notre composant.

Dans le chapitre précédent, nous avons vu comment utiliser un composant dans un autre. Toutefois, ce composant n’affiche pour le moment que des données statiques, prédéfinies à l’intérieur de sa structure HTML. Ce que nous aimerions, c’est pouvoir fournir ces données à nos composants à chaque fois que nous en utilisons un, de cette façon :

<template>
  <div class="dogs-gallery">
    <DogCard firstname="Pluto" breed="Saint-Hubert" picture_url="https://my-best-kennel.com/pictures/45.png"/>
    <DogCard firstname="Rex" breed="Labrador" picture_url="https://my-best-kennel.com/pictures/46.png"/>
  </div>
</template>

Nous pourrions ainsi avoir plusieurs instances de notre composant DogCard, une pour chaque chien dans notre chenil.

Utilisation de props

Ajout de props

Pour pouvoir passer des données comme des attributs dans la balise de notre composant, nous allons devoir définir des props.

Les props se définissent au sein de la configuration de notre composant, comme ceci :

<script>
export default {
  name: 'DogCard',
  props: ["firstname", "breed", "pictureUrl"],
}
</script>

Vous pourrez maintenant récupérer n’importe quel type de donnée au sein de votre composant par le biais des attributs que vous avez définis comme props.

Condition de validation des props

On cherchera généralement à préciser le type d’information que l’on souhaite recevoir dans nos props. On peut pour cela utiliser des conditions de validation. Il faudra alors définir nos props dans un objet, ayant pour champs le nom des props, et pour valeurs les conditions de validation :

<script>
export default {
  name: 'DogCard',
  props: {
    firstname: {type: String, required: true},
    breed: String, 
    pictureUrl: {type: String, default:"https://my-best-kennel.com/pictures/default.png"}
  }
}
</script>

On précise par exemple ici le type de donnée que l’on entend recevoir dans nos props : uniquement des String ici. Il est également possible d’indiquer qu’une props est requise et donc obligatoire pour le bon fonctionnement du composant, ou encore d’indiquer une valeur par défaut si jamais la props n’est pas renseignée.

Lorsque l’on souhaite simplement valider le type, il est possible de raccourcir la syntaxe en le renseignant directement en valeur comme ici pour breed . On peut également accepter plusieurs types avec un tableau : id: [String, Number] .

Vue.js intègre un grand nombre de conditions de validation. Elles vous permettront par exemple de vérifier le nombre de caractères ou encore le format de votre props (voir documentation Vue.js sur les props).

WARNING

Notez toutefois que si vous ne respectez pas ces conditions de validation, cela ne bloquera pas votre application. En environnement de développement, vous aurez simplement des avertissements vous alertant sur le mauvais usage qui est fait de votre props. Ces conditions restent très importantes car, au-delà de vous alerter, elles renseignent facilement sur la manière d’interagir avec votre composant de l’extérieur, sans avoir à connaître les logiques en œuvre à l’intérieur.

Injection de variables

Les props définies dans la configuration de votre composant peuvent ensuite être facilement injectées dans votre structure HTML. La manière de les inclure sera la même que pour l’ensemble des variables que nous apprendrons à définir dans nos composants.

Afficher une variable

Pour afficher le contenu d’une variable dans votre HTML, il vous suffit de l’injecter à l’aide de doubles accolades à l’emplacement souhaité : <h2 class="firstname"></h2>

Le contenu de la variable prendra dynamiquement place dans votre structure. Si jamais la valeur de la variable est amenée à changer, alors la valeur affichée sera également mise à jour.

Utiliser une variable dans un attribut

On peut également souhaiter inclure une variable dans la valeur d’un attribut de nos balises. C’est par exemple le cas si l’on veut définir la source src de la photo de notre chien. Dans ce cas, il faut avoir recours à la directive v-bind:, en l’ajoutant en préfixe de notre attribut. On peut ensuite utiliser nos variables dans la valeur de notre attribut : v-bind:src="picture_url" .

Cette directive indique à Vue.js qu’il doit traiter cet attribut dynamiquement. Si la valeur de la variable change, Vue.js se chargera de mettre à jour la balise pour correspondre à la nouvelle valeur. Dans notre cas, la balise affichera une nouvelle image.

Vous trouverez plus de détails sur les directives dans le chapitre dédié du cours.

Conclusion

Grâce à la mise en place de nos props, nous pouvons maintenant injecter les informations présentes dans notre composant :

<template>
  <div class="dog-card">
    <img class="picture" v-bind:src="pictureUrl"/>
    <div>
      <h2 class="firstname">{{firstname}}</h2>
      <p class="breed">{{breed}}</p>
    </div>  
  </div>
</template>

<script>
export default {
  name: 'DogCard',
    props: {
    firstname: {type: String, required: true},
    breed: String, 
    pictureUrl: {type: String, default:"https://my-best-kennel.com/pictures/default.png"}
  }
}
</script>

Cela rend notre composant réutilisable. Nous pouvons maintenant avoir plusieurs DogCard pour présenter nos chiens :

<template>
  <div class="dogs-gallery">
    <DogCard firstname="Pluto" breed="Saint-Hubert" pictureUrl="https://my-best-kennel.com/pictures/45.png"/>
    <DogCard firstname="Rex" breed="Labrador" pictureUrl="https://my-best-kennel.com/pictures/46.png"/>
  </div>
</template>

Malheureusement, cela reste peu pratique de devoir renseigner les données de chacun de nos chiens directement dans notre code. Ce que nous aimerions, c’est pouvoir utiliser des informations issues d’une base de données.

C’est ce que nous verrons dans les trois prochains chapitres.

Aller plus loin

• Sur les props :
  • La documentation
  • Openclassrooms