Composantes

Les composantes sont une partie importante de Vue. Ils permettent de créer des sites complexes à l’aide de composantes autonomes pouvant être réutilisables.

Définir une composante

Pour définir une composante, il suffit d’appeler la méthode component d’une application Vue et de lui passer deux paramètres:

  1. Le nom à lui attribuer.
  2. Un objet contenant des propriétés.
Les composantes acceptent les mêmes propriétés de base qu’une app Vue: data, methods, computed, etc.

Par exemple, pour définir une composante de compteur:

// Creation d'un app Vue const app = Vue.createApp({}) // Définition d'une composante app.component('counter', { data() { return { nbr: 0 } }, template: ` <button @click="nbr++"> Cliqué { { nbr } }x </button>` }) Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes. Remarquez la propriété template contenant une chaine de caractères correspondant au code HTML associé à la composante.

Lorsqu'une composante est définie, il est possible d'y faire référence dans le HTML d'une app à partir de son nom sous forme d'une balise.

Par exemple:

<counter>
Composante - Les bases Réutilisation

Une composante peut-être réutilisée aussi souvent que désiré.

Chaque bouton est entièrement indépendant. Ainsi le compteur de l'un n'a aucune influence sur le compteur d'un autre.

Utilisation / Réutilisation Props

Les props sont des données passées à une composante. Pour en définir, il faut spécifier le nom des props attendus dans un tableau.

Par exemple, si seulement la props msg est attendu:

app.component('counter', { props: ['msg'], ... })

Pour passer une donnée, il suffit ensuite d'ajouter un attribut avec la valeur désirée:

<counter msg="A"> <counter msg="B">

Lorsqu'une props est passée à une composante, elle devient l'équivalent d'une donnée dans data.

Props Boucle

Les composantes sont souvent utilisées conjointement avec de boucles afin de tirer profit de leur réusabilité.

Par exemple:

<counter v-for="btn in btnsArr" :msg="btn.msg"></counter>

Voici un autre exemple avec une composante de 2 props: pletter et pcolor.

EXERCICE Vue - Composante - Cartes de produit Cartes de produit