Slots, watch et cycle de vie

Ce que tu vas apprendre

• Laisser le parent fournir du contenu à un composant avec les slots.
• Exécuter du code quand une valeur change avec watch().
• Agir quand un composant apparaît ou disparaît avec onMounted() et onUnmounted().

Le slot : un trou à remplir

Une prop transmet une donnée. Un slot transmet un morceau de template. Le composant enfant place un <slot> là où le contenu du parent doit apparaître.

<template>
  <div class="encadre">
    <slot>Aucun contenu</slot>
  </div>
</template>

Le texte à l'intérieur de <slot> est le contenu par défaut, affiché si le parent ne donne rien. Le parent écrit son contenu entre les balises du composant :

<template>
  <Encadre>
    <p>Prépare la pâte la veille.</p>
  </Encadre>
</template>

Les slots nommés

Quand il y a plusieurs zones, on donne un nom à chaque <slot>. Celui sans nom s'appelle le slot par défaut.

<template>
  <article>
    <header><slot name="entete" /></header>
    <main><slot /></main>
    <footer><slot name="pied" /></footer>
  </article>
</template>

Le parent cible chaque zone avec v-slot:nom, ou son raccourci #nom, sur une balise <template> :

<template>
  <CarteComplete>
    <template #entete>
      <h3>Tarte aux pommes</h3>
    </template>

    <p>Étale la pâte, ajoute les pommes.</p>

    <template #pied>
      <small>Temps : 45 min</small>
    </template>
  </CarteComplete>
</template>

Le contenu qui n'est dans aucun <template> va dans le slot par défaut.

Observer un changement : watch

Parfois, un changement doit déclencher une action : enregistrer, appeler une API, écrire dans la console. C'est le rôle de watch().

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

const portions = ref(4)

watch(portions, (nouvelle, ancienne) => {
  console.log(`Portions : ${ancienne} -> ${nouvelle}`)
})
</script>

Le premier argument est la source à surveiller, le second la fonction appelée à chaque changement. Elle reçoit la nouvelle valeur puis l'ancienne.

Pour surveiller une propriété d'un objet réactif, passe une fonction qui la lit (un getter) :

watch(
  () => recette.nom,
  (nom) => console.log('Nom :', nom)
)

Avec l'option { immediate: true }, la fonction s'exécute aussi une première fois, dès la création du composant.

watchEffect : sans source explicite

watchEffect() exécute sa fonction tout de suite et repère seul les valeurs réactives qu'elle lit.

watchEffect(() => {
  console.log('Portions actuelles :', portions.value)
})

Choisis watch() quand tu veux contrôler la source et connaître l'ancienne valeur, watchEffect() quand c'est plus court.

Le cycle de vie

Un composant a une vie : il est créé, affiché dans la page, mis à jour, puis retiré. Les hooks de cycle de vie sont des fonctions que Vue appelle à ces moments.

<script setup>
import { onMounted, onUnmounted } from 'vue'

function surScroll() {
  console.log('Défilement')
}

onMounted(() => window.addEventListener('scroll', surScroll))
onUnmounted(() => window.removeEventListener('scroll', surScroll))
</script>

On branche l'écouteur au montage et on le retire à la fin pour ne rien laisser tourner dans le vide.

À retenir

• Un <slot> laisse le parent fournir du contenu ; le texte dans le <slot> est la valeur par défaut.
• Un slot nommé s'écrit <slot name="entete" /> côté enfant et <template #entete> côté parent.
• watch(source, fonction) réagit à un changement et reçoit la nouvelle et l'ancienne valeur.
• Un getter () => objet.propriete permet de surveiller une propriété d'un objet réactif.
• onMounted et onUnmounted encadrent la vie d'un composant : branche au montage, nettoie au démontage.