Nous poursuivons avec le chapitre 2 complet de la formation Vue.js, incluant les notions théoriques, les exemples de code, et le résultat final de l’atelier fil rouge : la création d’un composant TaskCard réutilisable, affiché dans App.vue avec des données statiques.

Chapitre 2 : Composants et props

L’objectif de ce second chapitre est de comprendre comment créer des composants réutilisables, les importer dans d’autres composants, et les alimenter avec des données via des props.

Notions à apprendre

1. Qu’est-ce qu’un composant ?

Un composant Vue est un bloc de code (template, script, style) qui peut être réutilisé à plusieurs endroits. Il encapsule sa logique, son rendu et son style.

2. Création d’un composant

• Fichier .vue avec <template>, <script setup>, <style>
• Nom du fichier : PascalCase (ex: TaskCard.vue)
• Import dans un autre composant avec import

3. Props (propriétés)

• Permettent de passer des données d’un composant parent à un composant enfant
• Définies avec defineProps() dans <script setup>
• Typage optionnel avec TypeScript ou validation avec PropTypes

4. Événements personnalisés (emit)

• Pour communiquer de l’enfant vers le parent
• Utilise defineEmits() et $emit() (ou emit() dans <script setup>)

5. Slots

• Permettent d’injecter du contenu HTML dynamique dans un composant
• Syntaxe : <slot></slot> dans le composant, contenu entre les balises dans l’utilisation

Exemple de code : TaskCard.vue

<!-- src/components/TaskCard.vue -->
<template>
  <div class="task-card">
    <h3 class="task-title">{{ title }}</h3>
    <p class="task-description">{{ description }}</p>
  </div>
</template>

<script setup>
// Définition des props
defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: 'Aucune description'
  }
})
</script>

<style scoped>
.task-card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.task-title {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.1rem;
}

.task-description {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}
</style>

Atelier fil rouge : Utiliser TaskCard dans App.vue

Objectif

• Créer le composant TaskCard.vue
• L’importer dans App.vue
• L’utiliser 3 fois avec des données statiques (titre + description)

Résultat final : App.vue mis à jour

<!-- src/App.vue -->
<template>
  <div class="app">
    <header>
      <h1>Mon gestionnaire de tâches</h1>
      <p>Chapitre 2 : Composants et props</p>
    </header>

    <main>
      <TaskCard 
        title="Tâche 1" 
        description="Créer le composant TaskCard" 
      />
      <TaskCard 
        title="Tâche 2" 
        description="Importer le composant dans App.vue" 
      />
      <TaskCard 
        title="Tâche 3" 
        description="Afficher 3 tâches avec des props" 
      />
    </main>

    <footer>
      <p>Vue.js — Formation Chapitre 2</p>
    </footer>
  </div>
</template>

<script setup>
import TaskCard from './components/TaskCard.vue'
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  color: #42b983;
  margin-bottom: 0.5rem;
}

header p {
  color: #666;
  font-size: 0.9rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}
</style>

Explication du résultat

• Le composant TaskCard est réutilisable : il peut être utilisé autant de fois que nécessaire.
• Les données sont passées via props (title et description).
• Le composant est isolé : son style est scoped, il n’affecte pas le reste de l’application.
• Le rendu est visuellement cohérent : chaque tâche a un style identique, avec un effet au survol.

Testez le vous-même !

• Créez le fichier src/components/TaskCard.vue avec le code ci-dessus.
• Mettez à jour src/App.vue avec le code du résultat final.
• Lancez le serveur de développement :

npm run dev

• Ouvrez http://localhost:5173 → vous voyez 3 cartes de tâches avec titres et descriptions.

Prochain chapitre

Chapitre 3 : Réactivité et gestion d’état — Apprenez à gérer des tableaux de tâches avec ref() et computed(), et à les afficher dynamiquement avec v-for.

Tu as maintenant un composant réutilisable, bien structuré, avec des props typées et un style propre. C’est la base de toute application modulaire en Vue !