Props et data
Différence entre props et data
Difficile de différencier les props et les datas dans un composant vuejs:
- les
props
sont les propriétés paramétrées et gérées de l'extérieur du composant.Lesprops
seraient les données publiques - Les
datas
sont les données internes au composant. Lesdatas
sont plutôt les données privées.
Apparemment cette différence est inspirée de ReactJs (voir l'article props vs state)
Un exemple
On va créer deux composants:
- Un composant tout simple qui écrit une ligne li avec une
prop
:commentpost
- Et un composant, qui utilise le premier et sa propriété
commentpost
pour afficher des commentaires saisies, composant qui ne comprend que desdatas
.
Mon premier composant:
<template> <li class="aeris-simple-li">{{commentpost}}</li> </template> <script> export default { // il ne comprend qu'une propriété commentpost props: { commentpost:{ type:String, default:"" } }, } </script> <style> li.aeris-simple-li{ display:table; } li.aeris-simple-li:before{ content:" \2192"; display: table-cell; padding: 0px 5px; } </style>
Le second composant
<template> <span class="aeris-mon-composant"> <ul> <!-- BOUCLE SUR LE TABLEAU comments ( data ) ET FAIT LA LIAISON ENTRE CHAQUE comment DE comments ET LA prop commentpost DE simple-composant REMARQUE Le tag <li> importe peu, ici, on pourrait aussi bien mettre un <span> il va être remplacé par <simple-composant>--> <li is="simple-composant" v-for="comment in comments" v-bind:commentpost="comment" ></li> </ul> <!-- LE INPUT POUR AJOUTER DES COMMENTAIRES newComment ET comments SONT DES data ON AJOUTE AUSSI LA method addComment TOUT SE PASSE A L'INTERIEUR DU COMPOSANT--> <input v-model="newComment" v-on:keyup.enter="addComment" placeholder="Add a comment" > </span> </template> <script> export default { data(){ return{ newComment: '', comments: [] } }, methods: { addComment() { this.comments.push(this.newComment); this.newComment = ''; } } } </script> <style> .aeris-mon-composant { display: block } .aeris-mon-composant ul{ list-style-type: none; } </style>
Ne pas oublier, d'importer et enregistrer les composants dans le fichier
src/main.js
Et d'appeler le composant <mon-composant></mon-composant>
dans la page index.html.
Ce composant n'a aucune propriété!