Composantes Vue

Les composantes sont une partie importante de Vue. Elles permettent de créer des sites complexes ou, même des applications web à l’aide de composantes autonomes pouvant être réutilisables.

Les composantes nous permettent de fractionner l'interface (UI) en morceaux indépendants et réutilisables, sur lesquels nous pouvons réfléchir de manière isolée. Il est courant pour une application d'être organisée en un arbre de composantes imbriquées.

Les composantes servent à:

• Réutiliser du code - Écris une fois, utilise partout
• Organiser ton application - Divise ton interface en morceaux logiques
• Maintenir facilement - Change une composante sans affecter le reste
• Collaborer - Chaque développeur peut travailler sur sa composante

Les composantes peuvent:

• Avoir leurs propres données (data)
• Recevoir des props (données des parents)
• Émettre des événements vers les parents
• Avoir des méthodes et des propriétés computed

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.

Info

Les composantes acceptent les mêmes propriétés de base qu’une app Vue: data, methods, computed, template, 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>`
})

Info

Remarquez la propriété template contenant une chaine de caractères correspondant au code HTML associé à la composante.

Utilisation d'une 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></counter>

See the Pen Vue.js Composante by TIM Montmorency (@tim-momo) on CodePen.

 En savoir plus sur Composante - Les bases

Réutilisation d'une composante

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

See the Pen Vue.js Composante - réutilisation by TIM Montmorency (@tim-momo) on CodePen.

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

 En savoir plus sur Utilisation / réutilisation d'une composante

Props (données provenant du parent)

Si nous construisons un blog, il est probable que nous ayons besoin d'un composant pour représenter un article du blog. Nous voulons que tous les articles partagent la même mise en page, mais avec un contenu différent. Un tel composant ne sera utile que si vous pouvez lui passer des données, comme le titre et le contenu d'un article spécifique que l'on voudrait afficher. C'est là que les props entrent en jeu.

Qu'est-ce qu'une prop?

Une prop (propriété) est un moyen de passer des données du parent vers l'enfant (de l'app Vue principale vers la composante enfant). C'est comme passer un paramètre vers fonction JavaScript, mais pour les composantes.

App parent
    |
    | (envoie des données via props)
    ↓
Composante enfant

Pourquoi utiliser des props?

• Communication unidirectionnelle : Les données descendent du parent à l'enfant
• Réutilisabilité : La même composante peut afficher différentes données
• Modularité : Chaque composante reste indépendante
• Maintenabilité : Les données sont centralisées dans le parent

Pour définir les props, il faut spécifier le nom des props attendus dans un tableau.

Par exemple, pour notre composante counter nous pourrions définir une prop msg:

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

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

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

See the Pen Vue.js Composante - props by TIM Montmorency (@tim-momo) on CodePen.

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

Warning

Les props sont des données passées aux composantes mais ne peuvent pas changer de valeur.

Tip

Pour nommer vos props, si vous utilisez du camelCase (mélange de minuscules et majuscules), vous devrez utiliser le kebab-case du côté HTML dans les noms d'attributs de votre composante. Mais au stade où on en est, pour le moment, je vous conseille simplement de n'utiliser que des minuscules dans les noms de vos props. Ça va vous simplifier la vie.

 En savoir plus sur les Props

Boucle v-for

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>

See the Pen Vue.js Composante - boucle by TIM Montmorency (@tim-momo) on CodePen.

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

See the Pen Vue.js Composante avec 2 props - boucle by TIM Montmorency (@tim-momo) on CodePen.