Components

Les Composants

Introduction aux Composants

Les composants constituent l'un des concepts fondamentaux de Vue.js. Ils permettent de découper l'interface utilisateur en morceaux réutilisables et modulaires. Un composant est essentiellement une instance de Vue avec son propre cycle de vie, ses données, ses méthodes et son rendu.

Définition des composants dans Vue.js

Dans Vue.js, un composant est une instance réutilisable qui encapsule une partie de l'interface utilisateur. Il peut être utilisé plusieurs fois dans une application, ce qui facilite la création d'interfaces complexes et la réutilisation de code. Les composants peuvent être imbriqués les uns dans les autres pour former une structure hiérarchique.

Avantages de l'utilisation des composants

L'utilisation de composants présente de nombreux avantages :

Réutilisabilité : Les composants permettent de réutiliser du code, ce qui facilite le développement et la maintenance de l'application.
Modularité : Les composants permettent de découper l'interface utilisateur en morceaux indépendants, ce qui facilite la compréhension et la gestion du code.
Encapsulation : Les composants encapsulent leur propre état et comportement, ce qui évite les conflits et facilite la gestion de l'application.
Composabilité : Les composants peuvent être combinés et imbriqués pour former des interfaces complexes, ce qui facilite la création d'interfaces riches et interactives.
Testabilité : Les composants peuvent être testés de manière isolée, ce qui facilite la mise en place de tests unitaires.

Structure d'un composant Vue.js

Un composant Vue.js est généralement composé des éléments suivants :

Template : Le template définit la structure et le rendu du composant. Il utilise la syntaxe HTML avec des ajouts spécifiques à Vue.js, tels que les directives et les expressions.
Script : Le script contient la logique du composant, y compris les données, les méthodes et les hooks du cycle de vie. Il est écrit en JavaScript ou en TypeScript.
Style : Le style contient les règles CSS qui s'appliquent au composant. Il peut être écrit en CSS classique, en préprocesseur CSS (comme Sass ou Less) ou en CSS-in-JS.

Un exemple de structure de composant Vue.js :

<script setup>
// ... code javascript
</script>

<template>
  <!-- Structure du composant (html) -->
</template>

<style>
/* Styles du composant (css) */
</style>

Vous trouverez aussi cette structure dans des exemples sur internet :

<template>
  <!-- Structure du composant -->
</template>

<script>
export default {
  // Données du composant
  data() {
    return {
      // ...
    };
  },
  // Méthodes du composant
  methods: {
    // ...
  },
  // Hooks du cycle de vie du composant
  created() {
    // ...
  },
  // ...
};
</script>

<style>
/* Styles du composant */
</style>

C’est l’ancienne façon d’écrire les composants Vue.js. Nous utiliserons la première notation dans ce cours.

Création du Composant Nav.vue

Maintenant que nous avons une compréhension de base des composants dans Vue.js, nous allons passer à la pratique en créant notre premier composant : Nav.vue. Ce composant sera responsable de l'affichage du code du navbar.

Voici les étapes à suivre pour créer le composant Nav.vue :

Créez un nouveau fichier Nav.vue dans le répertoire des composants de votre projet avec ce code:
```
<script setup></script>

<template></template>
```
Copiez le code du navbar de votre fichier App.vue et collez-le dans le template du composant Nav.vue. Le code ressemblera à ceci :

<template>
  <nav class="w-full bg-gray-900 fixed top-0">
    <!-- Code du navbar -->
  </nav>
</template>

Utilisez le composant Nav.vue dans le fichier App.vue en important le composant et en l'ajoutant à la structure du template. Remplacez le code du navbar par la balise <Nav /> pour utiliser le composant.

<template>
  <div class="flex flex-col h-full">
    <header>
      <!-- Utilisation du composant Nav -->
      <Nav />
    </header>

    <!-- ... Le reste du code ... -->
  </div>
</template>

Importez le composant avec ce code dans la balise script du fichier App.vue:

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

Maintenant, vous avez créé avec succès le composant Nav.vue et l'avez utilisé dans le fichier App.vue. Vous pouvez personnaliser le composant Nav.vue selon vos besoins en ajoutant des classes, des styles ou des fonctionnalités supplémentaires.

Création du Composant Footer.vue

Maintenant que nous avons créé le composant Nav.vue, nous allons procéder de la même manière pour créer le composant Footer.vue. Ce composant sera responsable de l'affichage du code du footer.

Voici les étapes à suivre pour créer le composant Footer.vue :

Créez un nouveau fichier Footer.vue dans le répertoire des composants de votre projet.
Copiez le code du footer de votre fichier App.vue et collez-le dans le template du composant Footer.vue. Le code ressemblera à ceci :

<template>
  <footer class="mt-auto py-3 bg-gray-100">
    <!-- Code du footer -->
  </footer>
</template>

La balise script, comme la balise style, ne sont pas obligatoires.

Utilisez le composant Footer.vue dans le fichier App.vue en important le composant et en l'ajoutant à la structure du template. Remplacez le code du footer par la balise <Footer /> pour utiliser le composant.

<template>
  <div class="flex flex-col h-full">
    <header>
      <!-- Utilisation du composant Nav -->
      <Nav />
    </header>

    <!-- ... Le reste du code ... -->

    <!-- Utilisation du composant Footer -->
    <Footer />
  </div>
</template>

Importez le composant avec ce code dans la balise script du fichier App.vue:

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

Maintenant, vous avez créé avec succès le composant Footer.vue et l'avez utilisé dans le fichier App.vue. Tout comme pour le composant Nav.vue, vous pouvez personnaliser le composant Footer.vue selon vos besoins en ajoutant des classes, des styles ou des fonctionnalités supplémentaires.

Les Slots

Dans Vue.js, les slots sont une fonctionnalité puissante qui permet de créer des composants flexibles et réutilisables. Les slots permettent d'insérer du contenu dynamique à l'intérieur d'un composant, ce qui le rend plus flexible et adaptable à différents cas d'utilisation.

Introduction à la notion de slot dans Vue.js

Un slot est une zone réservée à l'intérieur d'un composant où du contenu peut être inséré. Il permet de définir des points d'entrée pour le contenu dynamique afin de personnaliser l'apparence ou le comportement d'un composant. Les slots peuvent être utilisés pour insérer du contenu texte, des éléments HTML ou d'autres composants à l'intérieur d'un composant parent.

Voici un exemple simple d'utilisation d'un composant PrimaryButton.vue avec un slot :

PrimaryButton.vue :

<template>
  <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
    <slot></slot>
  </button>
</template>

Dans ce composant PrimaryButton.vue, nous avons un bouton stylisé avec une classe primary-button. À l'intérieur du bouton, nous avons utilisé un slot anonyme <slot></slot>. Cela signifie que tout contenu inséré entre les balises <PrimaryButton> lors de l'utilisation du composant sera affiché à l'intérieur du slot.

App.vue :

<script setup>
import PrimaryButton from './PrimaryButton.vue';
</script>

<template>
  <div>
    <PrimaryButton>
      Cliquez ici <!-- slot -->
    </PrimaryButton>
  </div>
</template>

Dans ce fichier App.vue, nous utilisons le composant PrimaryButton en l'entourant de balises <PrimaryButton>. À l'intérieur des balises, nous avons inséré le texte "Cliquez ici". Ce contenu sera inséré dans le slot anonyme du composant PrimaryButton, qui sera affiché à l'intérieur du bouton stylisé.

Lorsque le composant App.vue est rendu, il affiche le bouton avec le texte "Cliquez ici" à l'intérieur, en utilisant le style défini dans le composant PrimaryButton.vue.

Création du Composant Layout.vue avec un slot

Pour illustrer l'utilisation des slots, nous allons créer un composant Layout.vue qui servira de mise en page de base pour notre application. Ce composant aura un slot nommé content où le contenu spécifique à chaque page pourra être inséré.

Voici les étapes pour créer le composant Layout.vue :

Créez un nouveau fichier Layout.vue dans le répertoire des composants de votre projet.
Dans le template du composant Layout.vue, définissez une zone réservée pour le contenu en utilisant la balise <slot>. Vous pouvez également ajouter une structure HTML de base pour la mise en page.

<script setup>
import Nav from './Nav.vue';
import Footer from './Footer.vue';
</script>

<template>
  <div class="flex flex-col min-h-screen">
    <header>
      <Nav />
    </header>

    <main class="flex-grow py-5">
      <div class="container mx-auto">
        <slot name="title" />
        <slot name="content" />
      </div>
    </main>

    <Footer />
  </div>
</template>

Utilisez le composant Layout.vue dans le fichier App.vue. Entourez le contenu spécifique à chaque page avec la balise <template v-slot:content> et insérez le contenu à l'intérieur.

<script setup>
import Layout from './components/Layout.vue';
</script>

<template>
  <Layout>
    <template v-slot:title>
      <h1 class="mt-5 text-3xl font-bold">Pied de page fixe avec barre de navigation</h1>
    </template>

    <template v-slot:content>
      <p class="text-lg">
        Utilisez Tailwind pour fixer un pied de page au bas de la fenêtre avec des classes utilitaires comme 
        <code class="bg-gray-200 text-sm p-1 rounded">min-h-screen</code> et
        <code class="bg-gray-200 text-sm p-1 rounded">flex flex-col</code>.
      </p>
      <p>
        Découvrez plus d'exemples en visitant
        <a href="https://tailwindcss.com/docs"
           class="text-blue-500 hover:underline"
          >la documentation officielle de Tailwind CSS</a>.
      </p>
    </template>
  </Layout>
</template>

Maintenant, vous avez créé le composant Layout.vue qui utilise un slot pour insérer du contenu dynamique. Vous pouvez réutiliser ce composant dans différentes pages de votre application en insérant du contenu spécifique à chaque page à l'intérieur du slot. Nous verrons plus tard comment avoir plusieurs pages sur notre application.

https://vuejs.org/guide/components/slots.html#slots

Les Props

Dans Vue.js, les props sont une fonctionnalité qui permet de passer des données de composant parent à composant enfant. Les props permettent de rendre les composants plus flexibles et réutilisables en leur permettant de recevoir des données externes.

Introduction à la notion de props dans Vue.js

Les props sont des attributs personnalisés que vous pouvez définir sur un composant et qui peuvent être passés de son composant parent. Les props permettent au composant parent de communiquer avec le composant enfant en lui transmettant des valeurs.

<UserCard 
  name="Eli Kopter"
  job="CEO"
  img="/img/users/elikopter.jpg"
/>

Création du Composant NavLink.vue avec des props

Pour illustrer l'utilisation des props, nous allons créer un composant NavLink.vue qui affichera des liens de navigation personnalisés. Ce composant prendra une prop url pour spécifier l'URL du lien et une prop text pour spécifier le texte du lien.

Voici les étapes pour créer le composant NavLink.vue :

Créez un nouveau fichier NavLink.vue dans le répertoire des composants de votre projet.
Dans le template du composant NavLink.vue, utilisez les props pour afficher le lien de navigation personnalisé.

<template>
  <li class="list-none">
    <a
      class="block px-4 py-2"
      :class="{
        'text-blue-600 font-semibold': isActive,
        'text-gray-500 pointer-events-none opacity-50': isDisabled
      }"
      aria-current="page"
      :href="url"
      :disabled="isDisabled"
      :aria-disabled="isDisabled"
    >
      {{ text }}
    </a>
  </li>
</template>

Définissez les props url et text dans la section <script> du fichier NavLink.vue.

<script setup>
defineProps({
  url: {
    type: String,
    required: false,
    default: '',
  },
  text: {
    type: String,
    required: true,
  },
  isActive: {
    type: Boolean,
    required: false,
    default: false,
  },
  isDisabled: {
    type: Boolean,
    required: false,
    default: false,
  },
});
</script>

Dans cet exemple, nous avons défini quatre props : url de type String, text de type String, isActive de type Boolean (vrai ou faux) et isDisabled de type Boolean aussi. La prop text est requise, ce qui signifie qu'ils doivent être fournis lors de l'utilisation du composant NavLink.

Utilisez le composant NavLink.vue dans le composant Nav.vue en passant les valeurs des props.

<script setup>
import NavLink from './NavLink.vue';
import { ref } from 'vue';

const isMenuOpen = ref(false);
</script>

<template>
  <nav class="bg-gray-900 fixed top-0 w-full z-50">
    <div class="container mx-auto flex items-center justify-between p-4">
      <a class="text-white text-lg font-bold" href="#">Navbar Fixe</a>
      <button
        class="text-white block md:hidden focus:outline-none"
        type="button"
        @click="isMenuOpen = !isMenuOpen"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <svg
          class="h-6 w-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16m-7 6h7"
          ></path>
        </svg>
      </button>
      <div :class="{'hidden md:flex': !isMenuOpen}" class="w-full md:w-auto md:flex-grow">
        <ul class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4">
          <NavLink url="#" text="Home" :isActive="true" />
          <NavLink url="#" text="Link" />
          <NavLink text="Disabled" :isDisabled="true" />
        </ul>
        <form class="flex items-center mt-4 md:mt-0">
          <input
            class="form-input rounded-lg border border-gray-300 py-1 px-2 focus:ring focus:border-blue-300"
            type="search"
            placeholder="Recherche"
            aria-label="Search"
          />
          <button
            class="ml-2 bg-green-500 text-white px-4 py-1 rounded-lg hover:bg-green-600"
            type="submit"
          >
            Recherche
          </button>
        </form>
      </div>
    </div>
  </nav>
</template>

Dans cet exemple, nous utilisons le composant NavLink en lui passant les valeurs des props url et text. Chaque utilisation du composant NavLink crée un lien de navigation avec l'URL et le texte spécifiés.

https://vuejs.org/guide/components/props.html

Nettoyage des fichiers

Nous allons supprimer les fichiers qui ne sont plus utiles:

Dans le dossier src
- style.css
dans le dossier components
- HelloWorld.vue
dans le dossier assets
- vue.svg

Conclusion

Dans ce chapitre, nous avons exploré la notion de composants dans Vue.js. Nous avons commencé par une introduction générale sur les composants, en expliquant leur utilité et leur structure de base. Ensuite, nous avons mis en pratique nos connaissances en créant les composants Nav.vue et Footer.vue pour encapsuler le code du navbar et du footer respectivement.

Nous avons ensuite abordé la notion de slot dans Vue.js, en créant le composant Layout.vue qui utilise un slot pour insérer du contenu dynamique. Les slots nous permettent de personnaliser l'apparence et le comportement d'un composant en insérant du contenu spécifique à chaque utilisation.

Enfin, nous avons introduit les props dans Vue.js en créant le composant NavLink.vue qui utilise des props pour afficher des liens de navigation personnalisés. Les props permettent de rendre les composants plus flexibles et réutilisables en leur permettant de recevoir des données externes.

En récapitulant, voici les principaux points abordés dans ce chapitre :

Les composants dans Vue.js permettent de découper l'interface utilisateur en morceaux réutilisables et modulaires.
Les slots permettent d'insérer du contenu dynamique à l'intérieur d'un composant.
Les props permettent de passer des données de composant parent à composant enfant.

Les composants, les slots et les props sont des concepts essentiels dans le développement Vue.js. Ils favorisent la réutilisabilité, la modularité et la flexibilité du code, ce qui facilite la création d'applications robustes et évolutives.

N'hésitez pas à pratiquer davantage et à explorer d'autres fonctionnalités avancées de Vue.js pour approfondir vos connaissances.

Components

Les Composants

Introduction aux Composants#

Définition des composants dans Vue.js#

Avantages de l'utilisation des composants#

Structure d'un composant Vue.js#

Création du Composant Nav.vue#

Création du Composant Footer.vue#

Les Slots#

Introduction à la notion de slot dans Vue.js#

Création du Composant Layout.vue avec un slot#

Les Props#

Introduction à la notion de props dans Vue.js#

Création du Composant NavLink.vue avec des props#

Nettoyage des fichiers#

Conclusion#