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.

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.

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>`
})

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>

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.

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é à une composante, elle devient l'équivalent d'une donnée dans data.

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>