V04 — Exercices Composants

Enregistrez un composant global MonBouton avec app.component(). Le composant doit afficher un bouton avec un slot pour le texte. Utilisez ensuite ce composant dans le template de l'app.

Créez un composant CarteUtilisateur avec les props suivantes :
- nom (String, required)
- age (Number, required)
- email (String, optionnel)
Affichez ces informations dans un template.

Créez un composant BadgeStatut avec des valeurs par défaut :
- texte (String, défaut : "Actif")
- couleur (String, défaut : "green")
- taille (String, défaut : "md")

Créez un composant BoutonFermer qui émet un événement 'fermer' quand on clique dessus. Déclarez cet événement dans emits et utilisez this.$emit('fermer').

Créez un composant SaisieNote avec une note (1-5) et un commentaire. Quand l'utilisateur soumet, émettez l'événement 'noter' avec un objet { note, commentaire, date } comme payload.

Créez un composant PanneauInfo avec une prop titre et un slot par défaut pour injecter du contenu. Le parent doit pouvoir mettre n'importe quel HTML dans le composant.

Créez un composant Carte avec trois zones distinctes via des slots nommés :
- <slot name="header" />
- <slot /> (contenu principal)
- <slot name="footer" />

Créez un composant MonInput qui supporte v-model. Il doit :
- Accepter la prop modelValue
- Émettre 'update:modelValue' à chaque frappe
Ainsi le parent peut écrire : <MonInput v-model="texte" />

Créez une hiérarchie de composants où :
- Le composant racine provide() un objet avec theme et langue
- Un composant intermédiaire qui ne touche pas à ces données
- Un composant profond qui inject et affiche ces données

Créez une mini-app de liste de tâches avec 3 niveaux :
1. ListeTaches (gère le tableau de tâches, méthodes toggle)
2. ItemTache (reçoit une tâche via props, émet 'toggle')
3. BoutonCheck (bouton visuel, émet 'cliquer')
La communication remonte via les emits de chaque niveau.