Tutoriel VueJS 3 – Composants et props

Tout tient dans un seul fichier depuis sept chapitres. Ça ne passe pas l’échelle. Un composant est un morceau d’interface autonome, avec son gabarit, son état et sa logique, qu’on réutilise et qu’on imbrique.

Extraire la fiche produit

Créez src/components/ProductDisplay.vue et déplacez-y tout ce qui concerne le produit : l’image, le titre, la disponibilité, les détails, les pastilles, le bouton.

<script setup>
import { computed, ref } from 'vue'

const product = ref('T-Shirt')
const brand = ref('Gekkode')
const selectedVariant = ref(0)
const details = ref(['60 % coton', '30 % laine', '10 % polyester'])
const variants = ref([
  { id: 2234, color: '#2563eb', image: '/images/t-shirt-bleu.svg', quantity: 20 },
  { id: 2235, color: '#dc2626', image: '/images/t-shirt-rouge.svg', quantity: 0 }
])

const title = computed(() => `${brand.value} ${product.value}`)
const image = computed(() => variants.value[selectedVariant.value].image)
const inStock = computed(() => variants.value[selectedVariant.value].quantity > 0)

function updateVariant(index) {
  selectedVariant.value = index
}
</script>

<template>
  <div class="product-display">
    <div class="product-image">
      <img :src="image" :alt="title">
    </div>
    <div class="product-info">
      <h1>{{ title }}</h1>
      <p v-if="inStock">En stock</p>
      <p v-else>En rupture</p>
      <ul>
        <li v-for="detail in details" :key="detail">{{ detail }}</li>
      </ul>
      <div class="variants-wrapper">
        <div
          v-for="(variant, index) in variants"
          :key="variant.id"
          class="color-circle"
          :style="{ backgroundColor: variant.color }"
          @mouseover="updateVariant(index)"
        ></div>
      </div>
      <button class="button" :class="{ disabledButton: !inStock }" :disabled="!inStock">
        Ajouter au panier
      </button>
    </div>
  </div>
</template>

Le panier ne part pas avec : il n’appartient pas au produit. App.vue se réduit à :

<script setup>
import { ref } from 'vue'
import ProductDisplay from './components/ProductDisplay.vue'

const cart = ref(0)
</script>

<template>
  <div class="cart">Panier ({{ cart }})</div>
  <ProductDisplay />
</template>

Un composant importé dans <script setup> est directement utilisable dans le gabarit : pas de déclaration supplémentaire.

Nommer un composant

Deux conventions coexistent. En PascalCase, <ProductDisplay />, on distingue au coup d’œil un composant d’une balise HTML, et l’éditeur peut naviguer vers sa définition. En kebab-case, <product-display></product-display>, on reste compatible avec un gabarit écrit directement dans une page HTML.

Dans un fichier .vue, préférez le PascalCase.

Un composant a sa propre portée

Ajoutez trois fiches d’un coup :

<template>
  <ProductDisplay />
  <ProductDisplay />
  <ProductDisplay />
</template>

Trois fiches apparaissent, indépendantes : survoler une pastille de la première ne touche pas les autres. Chaque instance exécute son propre <script setup> et possède son propre selectedVariant.

Chaque fiche garde aussi sa propre déclinaison sélectionnée.

C’est aussi la raison pour laquelle l’état d’un composant se déclare dans une fonction. Si variants était un simple objet partagé au niveau du module, les trois fiches se marcheraient dessus.

Retirez les deux fiches en trop avant de continuer.

Les props

La portée isolée pose une question : comment le parent transmet-il une information à l’enfant ? Par un prop, un attribut personnalisé que le composant déclare accepter.

Ajoutons la livraison, gratuite pour les clients premium. L’information appartient au parent :

<script setup>
const premium = ref(true)
</script>

<template>
  <div class="cart">Panier ({{ cart }})</div>
  <ProductDisplay :premium="premium" />
</template>

Et l’enfant la déclare :

<script setup>
const props = defineProps({
  premium: { type: Boolean, required: true }
})

const shipping = computed(() => (props.premium ? 'Gratuite' : '2,99 €'))
</script>

<template>
  <p>Livraison : {{ shipping }}</p>
</template>

defineProps est disponible sans import dans <script setup> : c’est une macro du compilateur, pas une fonction ordinaire.

Dans le gabarit, on écrit {{ premium }} directement. Dans le script, il faut passer par l’objet renvoyé : props.premium.

Déclarer les props sérieusement

La forme longue permet de valider :

const props = defineProps({
  premium: { type: Boolean, required: true },
  titre: { type: String, default: 'Sans titre' },
  tailles: { type: Array, default: () => [] },
  note: {
    type: Number,
    validator: (valeur) => valeur >= 0 && valeur <= 5
  }
})

La valeur par défaut d’un tableau ou d’un objet doit être renvoyée par une fonction, sinon toutes les instances partageraient le même objet.

Les props descendent, et ne remontent pas

Un prop circule dans un seul sens : du parent vers l’enfant. L’enfant ne doit pas le modifier, Vue affiche un avertissement si vous essayez.

Si l’enfant a besoin d’une version locale modifiable, copiez-la dans un ref. S’il doit provoquer un changement chez le parent, il faut lui envoyer un signal : c’est l’objet du chapitre suivant.