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 :
J'ai importé le composant
HomeLinken utilisant l'importation ES6.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).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 baliseanchor.
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
Migrez le contenu de
index.htmlverscli-version/src/App.vueMigrez le répertoire des
imagesverscli-version/publicMettez à jour le chemin (path) des images dans
simpleMenupour qu'il soit relatif et non plus absolu (en supprimant le.qui préfixe l'URL).Créez un composant pour
MenuItem.vueet migrez les éléments (items) du menu.Utilisez des props pour vous assurer que les données de
MenuItemsont 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 !
