R3.01 - dev. web - côté client (vuejs)

• Les démonstrations de ce TD se basent sur les sources disponibles [ ici ].
• 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épot 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 message 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: () => return { ... }
  ...
}
</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.

• lancer npm run serve puis visualiser le résultat dans le navigateur (par ex. http://localhost:8080)
• Montrer le code de TD3Demo.vue. On observe que le composant a 3 props : title, show et initVal.
• Montrer le code de App.vue. On observe que les 3 attributs de la balise <TD3Demo> correspondent aux 3 props.
• Pour title, on fixe sa valeur "en dur" : pas besoin d'utiliser un v-bind. En revanche, pour les 2 autres, on veut pouvoir changer dynamiquement la valeur passée à TD3Demo. On est donc obligé d'utiliser v-bind.
• Si on tape quelque chose dans le champ de saisie, cela modifie la valeur de la variable value, initialisée grâce à la props initVal. On remarque que cela ne crée pas de lien spécial entre ces 2 variables puisque changer value ne change pas initVal.
• Cliquer sur le bouton "Toggle ...". Cela change la valeur de showMsg dans App. Comme cette variable est reliée à la props show de TD3Demo, un changement de showMsg implique le même changement pour show.
• Cliquer sur le bouton "Reset...". Un warning s'affiche et la valeur de la props initVal passe effectivement à 0. Cependant, la valeur de val dans App ne change pas.

• NB : les @click sont des directives vuejs pour gérer les événements click (comme onclick en JS classique). Les principes de gestion de événements sont décrits dans le TD 4