Vue.js est un moyen intéressant de rendre les sites Web plus intéressants. Une chose qu’il fait est d’utiliser des machines à sous. Pensez aux emplacements comme des espaces réservés où vous pouvez insérer des éléments dans une partie de site Web.

Que sont les machines à sous ?

Les emplacements Vue.js sont comme des emplacements spéciaux dans un composant de site Web. Ils vous permettent de placer diverses choses à ces endroits depuis une autre partie du site Web. C’est comme avoir une boîte dans laquelle vous pouvez placer différents jouets à différents endroits.

• Les accessoires aident à réutiliser les composants en transmettant différentes données.
• Cependant, ils entretiennent une relation parent-enfant stricte.
• Les enfants contrôlent le contenu HTML ; les parents transmettent les valeurs des données.
• Les machines à sous sont plus puissantes.
• Ils permettent la réutilisation des composants.
• Ils permettent au composant parent de contrôler le contenu à l’intérieur du contenu enfant.
• Les emplacements permettent à un composant parent d’intégrer n’importe quel contenu dans un composant enfant, y compris des éléments HTML.

Comment fonctionnent les machines à sous ?

Voyons les machines à sous en action :

Composant de la carte :

Ce fichier définit un composant Vue nommé CardComponent.

Modèle: À l’intérieur de cette carte spéciale, il y a un endroit où vous pouvez mettre différentes choses. C’est comme laisser un espace pour un message ou une image que la partie principale de votre application peut remplir.

Scénario: Cela donne simplement un nom à cette carte, comme l’appeler « CardComponent ».

Style: C’est comme dire à quoi devrait ressembler cette carte – quelle couleur, quelle taille – pour qu’elle soit unique, mais uniquement pour ce type de carte.

C’est donc une carte que vous pouvez réutiliser à différents endroits, et vous décidez de ce qu’elle contient à chaque fois que vous l’utilisez !

Composant d’application (parent) :

Modèle:

• Un
  externe avec le composant parent de classe.
• Un en-tête
  

  pour le composant parent.

Trois instances du CardComponent :

• La première instance n’a aucun contenu dans les balises , elle affiche donc par défaut le contenu fourni dans le modèle CardComponent (
  

  Contenu par défaut

  ).

• La deuxième instance a un contenu spécifique dans ses balises , remplaçant le contenu par défaut fourni par CardComponent.
• La troisième instance a également un contenu spécifique dans ses balises , comprenant cette fois un paragraphe et une image.

Scénario: il importe le CardComponent à partir de son fichier et l’enregistre en tant que composant à utiliser dans ce composant parent.

Sortir:

Fonctionnalité globale

• Le CardComponent est comme une carte polyvalente qui peut afficher différentes choses. Il comporte des emplacements spéciaux où la partie principale de votre application peut être placée dans du contenu, comme des messages ou des images. Cela rend chaque carte unique.
• C’est cool parce que la carte peut afficher des éléments par défaut si vous ne mettez rien à ces endroits, mais vous pouvez également la modifier et ajouter de nouvelles choses à chaque fois que vous l’utilisez.
• De cette façon, vous pouvez créer de nombreuses cartes qui se ressemblent mais qui disent des choses différentes.

Que sont les emplacements nommés dans Vue.js ?

• Les emplacements nommés dans Vue.js agissent comme des conteneurs étiquetés dans un composant. Ils vous permettent de désigner des zones spécifiques, comme « en-tête », « contenu » et « pied de page », au sein de votre composant. Au lieu d’un grand espace pour tout, les emplacements nommés vous permettent d’organiser le contenu dans ces zones étiquetées.
• Lorsque vous utilisez ce composant ailleurs dans votre code, vous pouvez facilement remplir chaque section étiquetée avec le contenu dont vous avez besoin. Par exemple, vous pouvez placer un titre dans « l’en-tête », des images ou du texte dans la zone principale et des informations de droits d’auteur dans le « pied de page ».
• C’est comme avoir différentes étagères dans une boîte et décider quels articles vont sur chaque étagère lorsque vous utilisez cette boîte ailleurs dans votre maison. Essentiellement, les emplacements nommés rendent vos composants plus adaptables et plus faciles à utiliser en vous permettant de spécifier où doivent aller les différents types de contenu.

Comment fonctionnent les emplacements nommés ?

Voyons les emplacements nommés en action :

Composant de la carte :

Composant d’application (parent) :

Sortir:

• J’ai créé un CardComponent avec des emplacements nommés pour l’en-tête, le contenu par défaut et le pied de page.
• Le CardComponent est un composant Vue.js conçu pour afficher du contenu dans une structure de type carte. Il se compose de trois emplacements : le en-tête, l’emplacement par défaut et le pied de page.
• Le modèle de CardComponent définit la structure de la disposition de la carte. A l’intérieur, il comporte trois divisions : en-tête de carte, contenu de la carte et pied de page, correspondant aux emplacements nommés pour l’en-tête, le contenu par défaut et le pied de page, respectivement.
• Dans le composant parent, un CardComponent est utilisé. Au sein de ce composant parent, un contenu spécifique est inséré dans chaque emplacement du CardComponent à l’aide du fente en V
• L’emplacement d’en-tête contient le titre « Slot dans Vue.js ».
• L’emplacement par défaut contient une image, souvent extraite du dossier des ressources. Il est couramment utilisé pour afficher un logo ou toute autre image dans ce composant.
• L’emplacement de pied de page contient un avis de droit d’auteur indiquant « @copyright2023 tous droits réservés ».

En utilisant ces emplacements nommés, le CardComponent peut être rempli dynamiquement avec un contenu différent dans son en-tête, sa section par défaut et son pied de page, offrant ainsi flexibilité et réutilisabilité lorsqu’il est utilisé dans différentes parties d’une application.

Que sont les accessoires de machines à sous ?

• Les accessoires de slot dans Vue.js sont comme des messagers spéciaux qui permettent à un composant parent d’envoyer des informations supplémentaires dans un slot d’un composant enfant.
• Ils permettent au parent de transmettre des données ainsi que le contenu qu’il place dans l’emplacement.
• Ces données peuvent ensuite être utilisées par le composant enfant pour personnaliser la façon dont ce contenu est affiché ou géré à l’intérieur de l’emplacement.
• C’est un moyen pour les composants de communiquer des détails spécifiques via des emplacements.

Voyons les accessoires de machines à sous en action :

Composant Liste de noms :

• Le composant NameList contient un modèle avec une balise h3, parcourant un tableau de noms à l’aide de v-for.
• Au sein de la boucle, un slot est utilisé avec des propriétés dynamiques :prénom et nom défini sur le prénom et le nom de chaque nom.
• Le composant restitue chaque nom dans une balise h3 et fournit à l’emplacement le prénom et le nom comme accessoires d’emplacement.

Composant d’application (parent) :

• Le composant App utilise le composant NameList plusieurs fois.
• À l’intérieur de chaque composant NameList, un modèle spécifique utilisant v-slot : par défaut est fourni.
• Le contenu de chaque section de modèle utilise slotProps pour accéder et afficher les noms et prénoms transmis via les emplacements du composant NameList.

Sortir:

Fonctionnalité globale :

• La première instance NameList dans App affiche « Bruce Wayne » pour chaque nom fourni par défaut via les accessoires de slot.
• La deuxième instance inverse l’ordre pour afficher « Wayne Bruce » pour chaque nom.
• La troisième instance affiche uniquement le prénom de chaque entrée.

Cela montre comment l’emplacement du composant NameList peut transmettre des données spécifiques (noms et prénoms) au composant App et comment le composant App peut contrôler l’affichage de ces données à l’aide des accessoires d’emplacement dans différentes instances du composant NameList.

Conclusion:

Dans Vue.js, les emplacements sont comme des endroits spécifiques où vous pouvez mettre différents éléments sur votre site Web. Ils facilitent la création de sites Web, en gardant les choses organisées et flexibles. En utilisant les machines à sous, les développeurs peuvent créer des sites Web qui s’intègrent bien, rendant l’ensemble du processus plus fluide et plus amusant.

Alors, essayez les machines à sous dans Vue.js et créez de superbes sites Web sans tracas !