Préambule

Les démonstrations de ce TD se basent sur les sources disponibles ci-dessous :

vuejs-td3-src.tgz

Attention, seul le répertoire src est dans l'archive. Il faut donc créer un projet avec vue-cli et remplacer son répertoire src.

1°/ Que sont les props ?

Dans le premier TP, on utilise un store vuex afin de créer un dépôt central de données, que se partagent tous les composants. Cependant, toutes les données applicatives n'ont pas besoin d'être totalement partagées. Dans bien des cas, il y a juste besoin qu'un composant père donne des valeurs à un composant fils. Par exemple, on imagine aisément un composant faisant office de barre de navigation dont les items lui seraient fournis par son père. Ce passage de valeurs se fait grâce au principe des props, sous-entendu les propriétés du composant fils, dont le père peut fixer la valeur. Les props restent malgré tout des variables locales à un composant, comme celle de data. Elles ne sont donc pas accessibles directement à l'extérieur du composant.

2°/ définir des props

Pour définir des variables de type props d'un composant, il suffit d'ajouter dans la partie script un champ nommé props, dont la valeur est :

• soit un tableau contenant uniquement le nom des variables,
• soit un objet dont les champs sont les noms des variables et leur valeur un type JS (String, Number, Boolean, Array, Object, Function, ...)

La deuxième syntaxe est à privilégier car elle permet d'avoir des messages d'alerte dans la console lorsque le composant parent donne une valeur du mauvais type à une props.

Exemple avec 2 props nommées title et show :

<script>
...
export default {
  name: 'MyComponent',
  props: { title: String, show: Boolean },
  data: () => ({ ... }),
  ...
}
</script>

3°/ Manipuler les props

On utilise les props comme les variables de data : avec leur nom dans <template> ou bien leur nom précédé de this. dans la partie <script>. Pour fixer leur valeur dans le composant parent, cela se passe lorsque l'on utilise la balise permettant de créer le composant fils. On donne simplement une valeur à un attribut portant le nom de la props. Du point de vue du parent, la props est donc un attribut du fils. Pour fixer la valeur de l'attribut représentant la props, cela fonctionne comme avec les autres attributs. On peut :

• soit donner une valeur statique, comme on le ferait en HTML. Par exemple : oneprop="hello",
• soit donner une valeur venant d'une variable du composant père, grâce à v-bind. Par exemple : v-bind:oneprop="myvar"

ATTENTION !

Modifier la valeur d'une props est normalement interdit, bien que cela soit possible. Dans ce cas, on a un message d'alerte dans la console. De plus, sauf exception, si une props est modifiée, cette modification ne sera pas répercutée dans le composant parent.

Démonstration :