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.Les props seraient les données publiques
• Les datas sont les données internes au composant. Les datas sont plutôt les données privées.

Apparemment cette différence est inspirée de ReactJs (voir l'article props vs state)

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 des datas.

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>