Introduction aux composants Vue

Introduction

Lors du développement d'une application volumineuse, il est toujours judicieux de la décomposer en composants plus petits pour faciliter la lecture, la structure et la maintenance du code. La plupart des débutants de Vue comprennent ce que sont les composants au moins conceptuellement, mais ils peuvent ne pas comprendre pleinement ce qu'ils peuvent et ne peuvent pas faire.

Dans ce guide, nous verrons ce qu'est un composant dans Vue, comment il fonctionne, comment lui transmettre des données et des événements et bien plus encore.

Qu'est-ce qu'un composant Vue ?

Composantes sont des instances réutilisables d'éléments Vue qui incluent des modèles, des styles et des éléments JavaScript. Chaque composant est "sa propre chose", de la même manière que chaque élément HTML est "sa propre chose", et les composants Vue et les éléments HTML nous permettent de les utiliser comme blocs de construction pour les pages Web.

Vous pouvez considérer les composants Vue comme des éléments HTML imprégnés de JavaScript, que vous pouvez définir et manipuler vous-même.

Une application Vue typique est composée de nombreux composants qui peuvent être réutilisés autant de fois que nécessaire.

Par exemple, un site Web habituel comporte des sections qui apparaissent sur toutes les pages - barre de navigation, en-tête, pied de page, etc. Par conséquent, il est considéré comme une bonne pratique de faire de chacun d'eux un composant distinct. De cette façon, nous créons un code bien structuré, lisible, réutilisable et facilement maintenable :

Comment créer un composant Vue

Il existe deux manières de base de créer un composant Vue, selon la façon dont notre projet a été créé - avec ou sans configuration de build. Dans le premier cas, chaque composant est stocké dans un fichier séparé. Dans le second cas, il peut y avoir plusieurs composants dans un même fichier.

Créer des composants Vue avec une configuration de construction

La plupart des projets sont créés à l'aide de configuration de construction, ce qui nous permet de créer des composants à fichier unique (SFC) – des fichiers de composants dédiés avec le .vue extension. Cela nous permet d'encapsuler le modèle, la logique et le style d'un composant Vue dans un seul fichier :

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Créer des composants Vue sans configuration de construction

Si, pour une raison quelconque, vous ne pouvez pas utiliser un gestionnaire de packages tel que npm pour installer Vue sur votre machine, vous pouvez toujours utiliser Vue dans votre application. Une alternative au bâtiment Vue utilisant npm est d'installer Vue via un Réseau de diffusion de contenu (CDN) directement dans votre application. Passons rapidement en revue cette manière de créer un composant Vue.

L'installation de Vue sans build nous permettra d'utiliser des fonctionnalités spécifiques à Vue comme nous le faisons avec du JavaScript simple. La syntaxe est quelque peu similaire à ce que nous avons vu dans les SFC habituels :

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

Dans ce guide, nous utiliserons le Syntaxe SFC, car il s'agit de la méthode la plus couramment utilisée pour créer des composants.

Comment enregistrer des composants dans Vue

Jusqu'à présent, nous avons vu comment créer des composants dans Vue. La prochaine étape consistera à utiliser ces composants dans un autre composant (hiérarchie parent-enfant).

Pour ce faire, nous devons d'abord enregistrer les composants que nous voulons utiliser. Cet enregistrement implique l'importation puis l'enregistrement des composants. Il y a deux options pour le faire - de défis ainsi que enregistrement local.

Composants Vue - Enregistrement global

Les composants enregistrés mondialement, comme leur nom l'indique, sont disponibles dans le monde entier, ce qui signifie qu'ils peuvent être utilisés dans n'importe quel composant de notre application sans que nous ayons à les importer à nouveau. Ceci est accompli en enregistrant un composant en utilisant le app.component() méthode:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Dans une situation où nous avons de nombreux composants, nous pouvons chaîne eux de cette façon:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Après avoir enregistré nos composants, nous pouvons les utiliser dans le modèle de n'importe quel composant de cette application en utilisant la syntaxe suivante :

<ChildComponent/>
<ProfileComponent/>

Composants Vue - Enregistrement local

Nous utiliserons l'enregistrement local dans la plupart des cas, car cela nous permet de déterminer la disponibilité de nos composants enregistrés. Importer ces composants puis les ajouter au components l'option accomplit ceci :

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Lorsque vous nommez des composants, utilisez Affaire de chameau pour préciser qu'il s'agit d'un composant Vue plutôt que d'un élément HTML natif dans les modèles. Cela facilite également l'importation et l'enregistrement de composants en JavaScript.

Comment transmettre des données via des composants Vue

L'un des avantages de la création de composants est la possibilité de réutiliser le code en le rendant modulaire.

Supposons que nous créons un composant de profil d'utilisateur qui doit recevoir les données de chaque étudiant à partir de la page de profil ; dans ce cas, nous devons transmettre ces données du composant de profil (composant parent) au composant de profil utilisateur (composant enfant), et nous utiliserons des accessoires.

Props

Les accessoires sont des attributs personnalisés que nous pouvons enregistrer sur un composant, afin que nous puissions transmettre des données du composant parent au composant enfant en utilisant le props option dans la balise de script :

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Slots

Les slots Vue sont des espaces réservés qui nous permettent de passer tout type de contenu d'un composant à un autre. Cela donne un contrôle plus centralisé que les accessoires car, contrairement aux accessoires, le composant parent contrôle le contenu à l'intérieur du composant enfant. Par exemple, nous pourrions créer le bouton suivant :

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Ensuite, nous pouvons utiliser ce composant où nous voulons et lui donner le contenu que nous désirons. Ne pas lui donner de contenu signifie qu'il utilisera la valeur par défaut que nous lui avons donnée (Click Me) :

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Comment émettre des événements à partir de composants Vue

Nous avons appris que les accessoires sont utilisés pour envoyer des données du composant parent au composant enfant. Mais nous pourrions nous demander s'il y avait un moyen d'envoyer quelque chose du composant enfant au composant parent. Et la réponse est Oui, les événements peuvent également être envoyés du composant enfant au composant parent.

Supposons que nous ayons un composant parent (App.vue) qui contient un seul composant enfant (MyBlogPost.vue). De plus, le composant enfant contient un bouton censé changer le titre.

Supposons que nous voulions changer le titre de notre page lorsqu'un bouton est cliqué, afin qu'une fonction soit déclenchée :

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Et le composant enfant ressemblera à ceci :

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Conclusion

Dans ce guide, nous avons appris à travailler avec des composants dans Vue, ce qui est essentiel pour quiconque utilise Vue. Nous avons également appris comment envoyer et recevoir des données, ainsi que comment émettre des événements.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://stackabuse.com/introduction-to-vue-components/