Utiliser Slots Dans Vue.js

Avec la version récente de Vue 2.6, la syntaxe d'utilisation des emplacements est devenue plus succincte. Ce changement de créneaux horaires m'a redonné envie de découvrir la puissance potentielle des créneaux horaires pour offrir réutilisabilité, nouvelles fonctionnalités et une lisibilité plus claire à nos projets basés sur Vue. De quoi les machines à sous sont-elles vraiment capables?

Si vous êtes nouveau dans Vue ou n’avez pas vu les modifications depuis la version 2.6, lisez la suite. La meilleure ressource pour apprendre sur les machines à sous est probablement La propre documentation de Vue mais je vais essayer de vous donner un aperçu ici.

Que sont les machines à sous?

Les machines à sous sont un mécanisme qui vous permet d'utiliser les composants Vue. pour composer vos composants d’une autre manière que la relation parent-enfant stricte. Les emplacements vous permettent de placer du contenu dans de nouveaux emplacements ou de rendre des composants plus génériques. La meilleure façon de les comprendre est de les voir en action. Commençons par un exemple simple:

 // frame.vue

Ce composant a un wrapper div . Supposons que div soit là pour créer un cadre stylistique autour de son contenu. Ce composant peut être utilisé de manière générique pour envelopper un cadre autour du contenu de votre choix. Voyons à quoi ça ressemble de l’utiliser. Le composant frame fait ici référence au composant que nous venons de créer plus haut.

 // app.vue

Le contenu situé entre les balises frame d'ouverture et de fermeture sera inséré dans le composant de la frame où se trouve l'emplacement en remplacement de l'emplacement . balises. C'est la manière la plus simple de le faire. Vous pouvez également spécifier le contenu par défaut à insérer dans un emplacement simplement en le remplissant:

 // frame.vue

Alors maintenant, si nous l'utilisons comme ceci à la place:

 // app.vue

Le texte par défaut de «Ceci est le contenu par défaut si rien n'est spécifié pour aller ici» apparaîtra, mais si nous l'utilisons comme auparavant, le texte par défaut sera remplacé par le img .

Slots multiples / nommés

Vous pouvez ajouter plusieurs emplacements à un composant, mais si vous le faites, tous les emplacements sauf un doivent avoir un nom. S'il en existe un sans nom, c'est l'emplacement par défaut. Voici comment créer plusieurs emplacements:

 // intitulé-frame.vue

Nous avons conservé le même emplacement par défaut, mais cette fois nous avons ajouté un emplacement nommé header dans lequel vous pouvez entrer un titre. . Vous l'utilisez comme ceci:

 // app.vue

Comme auparavant, si nous voulons ajouter du contenu à l'emplacement par défaut, il suffit de l'insérer directement dans le composant intitulé-frame . Pour ajouter du contenu à un emplacement nommé, nous avons toutefois dû insérer le code dans une balise template avec une directive v-slot . Vous ajoutez un colon (: ) après v-slot puis vous écrivez le nom de l'emplacement auquel vous souhaitez que le contenu soit transmis. Notez que v-slot est nouveau dans Vue 2.6, donc si vous utilisez une version plus ancienne, vous devrez lire la documentation sur la syntaxe de l'emplacement obsolète .

Scoped Slots

Une autre chose que vous devez savoir, c'est que les slots peuvent transmettre des données / fonctions à leurs enfants. Pour démontrer cela, nous aurons besoin d'un exemple de composant complètement différent avec des slots, un composant encore plus artificiel que le précédent: copions un peu l'exemple à partir de la documentation en créant un composant fournissant les données relatives à l'utilisateur actuel à ses slots:

 // utilisateur-actuel.vue
  

Ce composant a une propriété appelée utilisateur avec des détails sur l'utilisateur. Par défaut, le composant affiche le nom de famille de l’utilisateur, mais notez qu’il utilise v-bind pour lier les données de l’utilisateur au logement. Avec cela, nous pouvons utiliser ce composant pour fournir les données utilisateur à son descendant:

 // app.vue

Pour accéder aux données transmises à l'emplacement, spécifiez le nom de la variable scope avec la valeur de la directive v-slot .

Il y a quelques notes à prendre ici:

• Nous avons spécifié le nom de default bien que cela ne soit pas nécessaire pour l'emplacement par défaut. Au lieu de cela, nous pourrions simplement utiliser v-slot = "slotProps" .
• Il n’est pas nécessaire d’utiliser slotProps comme nom. Vous pouvez l’appeler comme vous le souhaitez.
• Si vous utilisez uniquement un emplacement par défaut, vous pouvez ignorer cette balise interne du modèle et placer la directive v-slot directement sur le balise [current-user] .
• Vous pouvez utiliser la déstructuration d'objet pour créer des références directes aux données de l'emplacement ciblé au lieu d'utiliser un seul nom de variable. En d'autres termes, vous pouvez utiliser v-slot = "{user}" au lieu de v-slot = "slotProps" puis vous pouvez directement utiliser l'utilisateur au lieu de slotProps.user .

Compte tenu de ces notes, l'exemple ci-dessus peut être récrit comme suit:

 // app.vue

Quelques points supplémentaires à garder à l'esprit:

• Vous pouvez lier plusieurs valeurs avec les directives de v-bind . Ainsi, dans l'exemple, j'aurais pu faire plus que simplement utilisateur .
• Vous pouvez également transférer des fonctions à des emplacements crantés. De nombreuses bibliothèques l'utilisent pour fournir des composants fonctionnels réutilisables, comme vous le verrez plus tard.
• L'emplacement v-slot est alias # . Ainsi, au lieu d'écrire v-slot: header = "data" vous pouvez écrire # header = "data" . Vous pouvez également spécifier simplement #header au lieu de v-slot: header lorsque vous n’utilisez pas de slots crantés. En ce qui concerne les emplacements par défaut, vous devez spécifier le nom default lorsque vous utilisez l’alias. En d'autres termes, vous devrez écrire # default = "data" au lieu de # = "data" .

Vous pouvez en apprendre davantage sur quelques points mineurs. de les documents mais cela devrait suffire à vous aider à comprendre de quoi nous parlons dans le reste de cet article.

Que pouvez-vous faire avec les machines à sous?

Les machines à sous n'ont pas été construites dans un but unique, ou du moins s'ils l'étaient, ils ont dépassé leur intention initiale de devenir un outil puissant pour faire beaucoup de choses différentes.

Modèles réutilisables

Les composants ont toujours été conçus pour pouvoir être réutilisés. , mais certains modèles ne sont pas pratiques à appliquer avec un seul composant "normal", car le nombre d'accessoires dont vous aurez besoin pour le personnaliser peut être excessif ou vous devrez transmettre de grandes parties de contenu et potentiellement d'autres composants à travers les accessoires . Les emplacements peuvent être utilisés pour englober la partie "extérieure" du motif et permettre à d'autres éléments HTML et / ou composants de s'y placer pour personnaliser la partie "intérieure", permettant ainsi au composant doté d'emplacements de définir le motif et les composants injectés dans le fichier. slots pour être unique.

Pour notre premier exemple, commençons par quelque chose de simple: un bouton. Imaginez que vous et votre équipe utilisiez Bootstrap *. Avec Bootstrap, vos boutons sont souvent liés à la classe de base `btn` et à une classe spécifiant la couleur, telle que` btn-primary`. Vous pouvez également ajouter une classe de taille, telle que `btn-lg`.

* Je ne vous encourage ni ne vous décourage de le faire, j'avais juste besoin de quelque chose pour mon exemple et il est assez connu.

Supposons maintenant, pour des raisons de simplicité, votre application / site utilise toujours btn-primary et btn-lg . Vous ne voulez pas toujours avoir à écrire les trois classes sur vos boutons, ou peut-être ne faites-vous pas confiance à une recrue de ne pas oublier de faire les trois. Dans ce cas, vous pouvez créer un composant contenant automatiquement ces trois classes, mais comment autoriser la personnalisation du contenu? Un prop n’est pas pratique, car une balise button est autorisée à contenir toutes sortes de HTML, nous devrions donc utiliser une fente.

Nous pouvons maintenant l'utiliser partout avec le contenu de votre choix:

Bien sûr, vous pouvez utiliser quelque chose de beaucoup plus gros qu'un bouton. Si vous vous en tenez à Bootstrap, regardons un modal, ou au moins la partie HTML; Je n’entrerai pas dans la fonctionnalité… pour le moment.

Maintenant, utilisons ceci:

Le type d'utilisation ci-dessus pour les fentes est évidemment très utile, mais il peut faire encore plus.

Réutilisation de la fonctionnalité

Composants Vue ne sont pas tous au sujet du HTML et du CSS. Ils sont construits avec JavaScript, ils portent donc aussi sur la fonctionnalité. Les emplacements peuvent être utiles pour créer une fonctionnalité une fois et l'utiliser à plusieurs endroits. Revenons à notre exemple modal et ajoutons une fonction qui ferme le modal:

Maintenant, lorsque vous utilisez ce composant, vous pouvez ajouter un bouton au pied de page permettant de fermer le modal. Normalement, dans le cas d'un modal Bootstrap, vous pouvez simplement ajouter data-lic = = modal à un bouton, mais nous souhaitons masquer certaines choses spécifiques à Bootstrap des composants qui y figureront. composant. Nous leur transmettons donc une fonction qu’ils peuvent appeler et ils ne sont pas au courant de l’implication de Bootstrap:

Renderless Components

Enfin, vous pouvez utiliser ce que vous savez sur l'utilisation des emplacements pour transmettre des fonctionnalités réutilisables, et supprimer la quasi-totalité du code HTML et simplement utiliser les emplacements. C'est essentiellement ce qu'est un composant sans rendu: un composant qui fournit uniquement des fonctionnalités sans HTML.

Rendre des composants vraiment sans rendu peut s'avérer un peu délicat, car vous devrez écrire des fonctions de rendu plutôt que d'utiliser un modèle. afin de supprimer la nécessité d'un élément racine, mais cela peut ne pas toujours être nécessaire. Jetons un coup d’œil à un exemple simple qui nous permet d’utiliser un modèle en premier lieu:

C’est un exemple étrange d’un composant sans rendu car il ne contient même pas de JavaScript. C’est principalement parce que nous venons de créer une version réutilisable préconfigurée d’une fonction intégrée sans rendu: transition .

Oui, Vue intègre des composants sans rendu intégrés. Cet exemple particulier est tiré d'un article sur de Cristi Jora sur les transitions réutilisables. Il montre un moyen simple de créer un composant sans rendu capable de normaliser les transitions utilisées dans votre application. L'article de Cristi va beaucoup plus en profondeur et montre quelques variations plus avancées des transitions réutilisables, je vous conseille donc de le vérifier.

Pour notre autre exemple, nous allons créer un composant qui gère la commutation de ce qui est affiché au cours des différents états de une promesse: en attente, résolue avec succès et a échoué. C’est un schéma courant et même s’il n’exige pas beaucoup de code, il peut embrouiller de nombreux composants si la logique n’est pas utilisée pour assurer la réutilisation.

Alors, que se passe-t-il ici? Tout d'abord, notez que nous recevons un accessoire appelé promesse qui est une promesse . Dans la section watch nous surveillons les modifications apportées à la promesse et quand elle change (ou immédiatement lors de la création de composants grâce à la propriété immediate ), nous effaçons l'état et appelons . et attrapent sur la promesse, mettant à jour l'état lorsqu'il finit avec succès ou échoue.

Ensuite, dans le modèle, nous affichons un emplacement différent en fonction de l'état. Notez que nous n’avons pas réussi à le garder véritablement sans rendu car nous avions besoin d’un élément racine pour pouvoir utiliser un modèle. Nous transmettons également les données et erreurs aux portées de logement correspondantes.

Voici un exemple d'utilisation:

 
 ...

Nous passons dans à quelque composant au composant sans rendu. En attendant que cela se termine, nous affichons «Travailler dessus…» grâce au créneau en attente . Si cela réussit, nous affichons «Résolu:» et la valeur de résolution. Si cela échoue, nous affichons «Rejected:» (Rejeté:) et l'erreur qui a provoqué le rejet. Maintenant, nous n'avons plus besoin de suivre l'état de la promesse dans cette composante, car cette partie est extraite dans sa propre composante réutilisable.

Alors, que pouvons-nous faire à ce sujet span enveloppant les fentes dans promise.vue ? Pour le supprimer, nous devrons supprimer la partie modèle et ajouter une fonction render à notre composant:

 render () {
  if (this.error) {
    retourne ceci. $ scopedSlots ['rejected'] ({erreur: this.error})
  }

  si (ceci.résolu) {
    retourne ceci. $ scopedSlots ['resolved'] ({data: this.data})
  }

  retourne ceci. $ scopedSlots ['pending'] ()
}

Il n’ya rien de trop délicat ici. Nous utilisons simplement quelques si blocs pour trouver l’état, puis nous renvoyons le créneau approprié (via this. $ ScopedSlots ['SLOTNAME'] (...) ) et en passant le données à la portée de la fente. Lorsque vous n'utilisez pas de modèle, vous pouvez ignorer l'utilisation de l'extension de fichier .vue en extrayant le code JavaScript du tag et en le plongeant dans un fichier .js fichier. Cela devrait vous donner un léger sursaut de performances lors de la compilation de ces fichiers Vue.

Cet exemple est une version simplifiée et légèrement modifiée de vue-promise que je recommanderais d'utiliser l'exemple ci-dessus, car ils couvrent des pièges potentiels. Il existe de nombreux autres excellents exemples de composants sans rendu. Baleada est une bibliothèque complète contenant des composants sans rendu qui fournissent des fonctionnalités utiles comme celle-ci. Il y a aussi vue-virtual-scroller pour contrôler le rendu d'un élément de liste en fonction de ce qui est visible à l'écran ou de PortalVue pour «téléporter» du contenu dans des parties complètement différentes du DOM. 19659091] I'm Out

Les machines à sous de Vue donnent un développement sans précédent aux composants, et même si j'ai déjà démontré de nombreuses façons d'utiliser les machines à sous, il en existe d'innombrables autres. Quelle bonne idée pouvez-vous penser? Selon vous, de quelle manière les machines à sous pourraient-elles obtenir une mise à niveau? Si vous en avez, assurez-vous d'apporter vos idées à l'équipe de Vue. Dieu vous bénisse et codage heureux.

(dm, il)