• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/03/2022

Facilitez la maintenance grâce aux composants monofichiers

Appréhendez le problème de la complexité

Lors de la création d'un site web, nous sommes très souvent amenés à répéter notre code et cela rend souvent la maintenance un peu difficile. Par exemple, la plupart des sites web ont un menu de navigation sur chaque page.

<html>
    <body>
        <nav>
            <a href="/">Accueil</a>
            <a href="/about">À propos</a>
            <a href="/contact">Contact</a>
        </nav>
        <p>Bienvenue sur notre page d'<a href="/">Accueil</a></p>
    </body>
</html>

Bien que cela soit assez simple à gérer sur une seule page, imaginez ce qui se passerait si quelqu'un devait modifier les liens de navigation. Si vous deviez mettre à jour la classe CSS pour actualiser les styles, cela nécessiterait au moins trois lignes de modifications de code pour chaque page qui utilise cette navigation. Par conséquent, cela crée de nombreuses possibilités de bugs.

Découvrez la solution : les composants

Pour résoudre ce problème, le concept de composants a été popularisé. Ils permettent d'encapsuler un ensemble d'éléments HTML, de façon réutilisable et facilement maintenable.

Les composants monofichiers vous permettent de créer des éléments HTML personnalisés qui encapsulent leur comportement d'une manière facilement maintenable. Ils constituent l'une des meilleures caractéristiques de Vue et peuvent être identifiés par leur extension .vue. Ils sont composés de trois blocs primaires :

  • Script - où vit votre JavaScript ;

  • Template - où vit votre HTML ;

  • Style - où vit votre CSS.

Commençons par créer un exemple simple dans notre répertoire de composants :

// ./components/HomeLink.vue
<script>
export default {
    name: 'HomeLink'
}
</script>

<template>
    <a href="/">Accueil</a> 
</template>

<style>
    a {
        text-decoration: none;
    }
</style>

Les composants monofichiers vous permettent d'encapsuler votre logique, votre contenu et vos styles de façon à faciliter leur maintenance et leur évolution. Vous tirerez également parti des meilleures pratiques, puisque le processus de construction séparera votre code en packages corrects au moment du build.

Utilisez les composants monofichiers

Nous allons remanier notre exemple de navigation en utilisant notre nouveau composant dans Vue. Allez dans App.vue et tapez :

<script>
import HomeLink from './components/HomeLink.vue'

export default {
    name: 'App',
    components: {
        HomeLink
    }
}
</script>

<template>
    <div id="app">
        <nav>
            <HomeLink />
            <a href="/about">À propos</a>
            <a href="/contact">Contact</a>
        </nav>
        <p>Bienvenue sur notre page d'<HomeLink /></p>
    </div>
</template>

Revoyons ce qui vient de se passer :

  1.  J'ai importé le composant  HomeLink  en utilisant l'importation ES6.

  2. J'ai enregistré le composant via la propriété  components, qui prend un objet comme valeur avec des paires clé-valeur pour enregistrer les composants (dans l'exemple, j'utilise la notation abrégée ES6 pour définir les paires clé-valeur des objets. En ne définissant la valeur que comme une seule variable, JavaScript comprend qu'il faut la décomposer en :  "HomeLink" : Homelink).

  3. Enfin, j'ai remplacé toutes les références de   <a href="/">Home</a>  par notre nouveau composant   <HomeLink />.

Cette action est très puissante, car toutes les modifications que vous souhaitez apporter au lien d'accueil peuvent maintenant être faites à partir d'un seul endroit. Et une fois que vous aurez fait ce changement, il sera appliqué automatiquement au reste de la page.

Gérez la communication entre vos composants : les props

Bien que l'exemple ci-dessus soit utile car il peut être réutilisé, il est plutôt limité puisqu'il comporte une URL et un texte codés en dur. Imaginez si vous pouviez configurer les composants. Eh bien, c'est possible grâce aux props:

Props  est un attribut que vous pouvez définir au niveau du composant qui sera transmis directement au template.

Prenons l'exemple de notre composant HomeLink et transformons-le en un composant plus générique : NavLink.

// ./components/NavLink.vue
<script>
export default {
    name: 'NavLink',
    props: ['url', 'text']
}
</script>

<template>
    <a :href="url">{{ text }}</a>
</template>

Nous définissons deux  props  pour notre nouveau composant :

  • url  - qui alimentera notre attribut href ;

  • text  - qui remplira le texte qui vit dans la balise  anchor.

Il sera utilisé comme ceci :

<script>
import NavLink from './components/NavLink.vue'

export default {
    name: 'App',
    components: {
        NavLink
    }
}
</script>

<template>
    <div id="app">
        <nav>
            <NavLink url="/" text="Accueil" />
            <NavLink url="/about" text="À propos" />
            <NavLink url="/contact" text="Contact" />
        </nav>
    </div>
</template>

Avec ce refactoring, notre application est plus facile à maintenir puisqu'il n'y a qu'un seul fichier qui contient toutes les configurations dont nous avons besoin. Elles seront ensuite appliquées dans toute notre application. En d'autres termes, une fois que nous aurons apporté une modification à ce fichier, elle sera appliquée de manière uniforme dans le reste de l'application.

Exercez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P2C2-Begin.

Instructions

  1. Migrez le contenu de  index.html  vers  cli-version/src/App.vue

  2. Migrez le répertoire des  images  vers  cli-version/public

  3. Mettez à jour le chemin (path) des images dans  simpleMenu  pour qu'il soit relatif et non plus absolu (en supprimant le  .  qui préfixe l'URL).

  4. Créez un composant pour  MenuItem.vue  et migrez les éléments (items) du menu.

  5. Utilisez des props pour vous assurer que les données de  MenuItem  sont toujours correctement rendues et qu'elles peuvent toujours mettre à jour le total du panier (astuce : vous pouvez transmettre des fonctions dans les props).

En résumé

Félicitations, vous avez appris à créer et à naviguer dans les composants ! Dans ce chapitre, vous avez appris à :

  • identifier des composants sur une page web ;

  • créer des composants avec des composants monofichiers ;

  • utiliser des composants dans d'autres composants ;

  • transférer des données dans des composants avec les props.

Maintenant, nous allons découvrir un élément essentiel pour toute application : la navigation par le routage !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite