L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Un guide pour créer des interfaces utilisateur évolutives et modulaires / Blogs / Perficient
Dans ce blog, nous explorerons l’importance des composants, comment les créer et les meilleures pratiques pour créer des interfaces utilisateur modulaires et réutilisables.
Pourquoi les composants Vue sont essentiels pour créer des interfaces utilisateur évolutives
Les composants sont une fonctionnalité essentielle de Vue.js, connue pour sa simplicité et sa flexibilité. Ils servent de base aux applications Vue, permettant aux développeurs de diviser l’interface utilisateur en unités plus petites et autonomes. Cette approche modulaire rend le code plus organisé, réutilisable et simple.
- Considérez les composants comme des pièces individuelles d’un puzzle.
- Chacun peut être développé, testé et entretenu indépendamment et, une fois combinés, ils créent une application entièrement fonctionnelle.
- Qu’il s’agisse d’un bouton, d’un formulaire ou d’un tableau de données complexe, les composants vous permettent de concevoir des éléments d’interface utilisateur modulaires faciles à mettre à jour.
Que sont les composants Vue ?
Dans Vue, un composant est une unité autonome de fonctionnalités qui comprend un modèle, un script et un style facultatif. Les composants aident à modulariser l’interface utilisateur, facilitant ainsi la réutilisation de parties de l’interface dans différentes parties de l’application.
Voici un exemple de composant Vue pour un simple bouton
//MyButton.vue
<template>
<button @click="handleClick">{{ label }}</button>
</template>
<script>
export default {
data() {
return {
label: 'Click Me'
};
},
methods: {
handleClick() {
alert('Button Clicked!');
}
}
};
</script>
<style scoped>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>Décrypter le code
- Modèle: Définit la structure HTML du composant. Dans ce cas, c’est un simple bouton qui affiche le label.
- Scénario: Contient la logique, telle que la données() fonction (pour les propriétés réactives) et la poignéeCliquez méthode (pour le comportement du bouton).
- Style: Le style étendu garantit que les styles du bouton sont isolés de ce composant et n’affecteront pas les autres dans l’application. Cet exemple simple montre comment les composants fonctionnent comme des unités isolées dans Vue. Cependant, à mesure que votre application se développe, l’organisation et la gestion des composants deviennent cruciales.
Pourquoi utiliser des composants dans Vue ?
Les composants Vue offrent plusieurs avantages qui contribuent à créer des applications robustes, maintenables et évolutives :
- Réutilisabilité : Une fois définis, les composants peuvent être utilisés sur plusieurs pages ou sections de votre application, réduisant ainsi la duplication de code.
- Modularité : Étant donné que les composants sont isolés, vous pouvez en modifier un sans vous soucier de casser d’autres parties de l’application.
- Évolutivité : Commencez avec de petits composants ciblés et développez-les rapidement en des interfaces utilisateur plus grandes et plus complexes à mesure que votre application se développe.
Fonctionnalités avancées des composants
Une fois que vous êtes à l’aise avec les composants de base, Vue propose des fonctionnalités avancées qui rendent vos composants encore plus puissants :
Machines à sous : Le
Exemple de créneau
<!-- Modal.vue --> <template> <div class="modal"> <div class="modal-content"> <slot></slot> <!-- Content inserted here will be rendered in the modal --> </div> </div> </template>
Utilisation dans un composant parent
<Modal> <h2>This is a Modal Title</h2> <p>This content will go inside the modal.</p> </Modal>
Composants dynamiques : Vous pouvez basculer dynamiquement entre différents composants à l’aide de l’élément de composant de Vue et l’attribut : est particulièrement utile pour créer des interfaces à onglets ou du contenu qui change en fonction de l’interaction de l’utilisateur.
Exemple de commutation dynamique entre les composants
Passons en revue un exemple dans lequel nous basculons dynamiquement entre différents composants en utilisant l’élément composant de Vue et le :est attribut. Dans cet exemple, nous allons créer un bouton qui vous permet de basculer dynamiquement entre différents composants.
Exemple étape par étape
Créer des composants (par exemple, ComposantA, ComposantB, ComposantC) pour basculer entre. Ensuite, construisez le MonBouton composant pour gérer la commutation dynamique des composants à l’aide du ‘:est’ attribut.
1. Créez les composants (ComponentA, ComponentB, ComponentC)
Définissons quelques composants simples entre lesquels basculer.
<!-- ComponentA.vue -->
<template>
<div>
<h3>This is Component A</h3>
<p>Content for Component A.</p>
</div>
</template>
<script>
export default {
name: 'ComponentA',
};
</script><!-- ComponentB.vue -->
<template>
<div>
<h3>This is Component B</h3>
<p>Content for Component B.</p>
</div>
</template>
<script>
export default {
name: 'ComponentB',
};
</script>
<!-- ComponentC.vue -->
<template>
<div>
<h3>This is Component C</h3>
<p>Content for Component C.</p>
</div>
</template>
<script>
export default {
name: 'ComponentC',
};
</script>2. Créez le composant MyButton
Créons maintenant le composant MyButton qui basculera dynamiquement entre ComponentA, ComponentB et ComponentC à l’aide de l’attribut : is.
<!-- MyButton.vue -->
<template>
<div>
<!-- Button to change the current component -->
<button @click="changeComponent('ComponentA')">Show Component A</button>
<button @click="changeComponent('ComponentB')">Show Component B</button>
<button @click="changeComponent('ComponentC')">Show Component C</button>
<!-- Dynamic component rendering -->
<component :is="currentComponent"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';
export default {
name: 'MyButton',
components: {
ComponentA,
ComponentB,
ComponentC,
},
data() {
return {
currentComponent: 'ComponentA', // Default component to show
};
},
methods: {
changeComponent(componentName) {
this.currentComponent = componentName; // Update the current component based on button clicked
},
},
};
</script>
<style scoped>
button {
margin: 10px;
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>3. Composant parent (App.vue)
Enfin, rassemblons le tout dans le fichier App.vue, où nous utiliserons MyButton pour gérer la commutation dynamique des composants.
<!-- App.vue -->
<template>
<div id="app">
<h1>Dynamic Component Switcher</h1>
<MyButton />
</div>
</template>
<script>
import MyButton from './components/MyButton.vue';
export default {
name: 'App',
components: {
MyButton,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
font-size: 2em;
}
</style>Sortir:
Après être passé du composant A au composant B
Comment ça marche :
- Rendu des composants dynamiques : Dans le MyButton.vue fichier, il y a une ligne de code spéciale
- Boutons: Il y a trois boutons dans le MonBouton composant. Lorsque vous cliquez sur l’un d’eux, il appelle le changementComponent() méthode, qui met à jour le composant actuel valeur au nom du composant sur lequel vous avez cliqué (soit composé, ComposantBou ComposantC). Cette modification met automatiquement à jour le composant affiché. Ainsi, les clics sur le bouton permettent de basculer entre les différents composants à l’écran.
Résultats
Lorsque vous exécutez l’application
- La vue initiale affichera Composant A.
- En cliquant sur les boutons, vous passerez dynamiquement à Composant B ou Composant C en fonction du bouton cliqué.
Résumé: Cette configuration utilise Vue
Meilleures pratiques pour organiser les composants Vue
À mesure que votre application Vue se développe, il est essentiel d’organiser efficacement vos composants. Voici quelques conseils pour vous aider à garder tout propre et facile à entretenir :
- Conception atomique : Divisez votre interface utilisateur en composants plus petits et réutilisables. Commencez par des composants atomiques tels que des boutons et des entrées, puis combinez-les dans des structures plus grandes telles que des formulaires et des barres de navigation.
- Structure des dossiers : Pour garder votre projet organisé, regroupez les composants par fonctionnalité ou sections d’interface utilisateur. Par exemple, vous pouvez avoir des dossiers tels que /components/buttons, /components/forms et /components/layouts.
- Conventions de dénomination : Donnez aux composants des noms significatifs qui décrivent leur objectif. Cela vous aidera (ainsi que votre équipe) à comprendre ce que fait chaque composant en un coup d’œil.
Optimiser les performances avec les composants Vue
Vue vous permet d’améliorer les performances lorsque vous travaillez avec des composants :
- Chargement paresseux : Vous pouvez utiliser `import()` dynamique pour charger les composants uniquement lorsque cela est nécessaire, ce qui permet de réduire la taille initiale du bundle et d’améliorer les temps de chargement des pages.
- v-if contre v-show : Utilisez v-if pour le rendu conditionnel des composants uniquement lorsque cela est nécessaire. Cela évite un rendu inutile et peut améliorer les performances.
Conclusion
Les composants Vue.js sont puissants pour créer des interfaces utilisateur propres, maintenables et évolutives. En divisant votre application en parties plus petites et réutilisables, vous pouvez améliorer à la fois l’efficacité du développement et la maintenabilité à long terme de votre projet. Qu’il s’agisse de travailler sur des éléments d’interface utilisateur simples ou de créer des applications complexes, la maîtrise des composants Vue vous mettra sur la voie du succès.
Commencez à créer vos composants Vue.js dès aujourd’hui et regardez votre application se développer de manière modulaire avec chaque nouvelle fonctionnalité !
Source link