Préambule
- 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.
Démonstration :
- 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