Machines à sous Vue.js

Les emplacements vous aident à positionner le contenu dans un composant et permettent aux composants parents de l'organiser.

Un composant peut être responsable à 100% de la génération de sa sortie, comme dans ce cas:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

ou il peut également laisser le composant parent y injecter n'importe quel type de contenu, en utilisantfentes.

Qu'est-ce qu'un slot? C'est un espace dans la sortie de votre composant qui est réservé, en attente d'être rempli.

Vous définissez un emplacement en mettant<slot></slot>dans un modèle de composant:

Vue.component('user-information', {
  template: '<div class="user-information"><slot></slot></div>'
})

Lors de l'utilisation de ce composant, tout contenu ajouté entre les balises d'ouverture et de fermeture sera ajouté à l'intérieur de l'espace réservé de l'emplacement:

<user-information>
  <h2>Hi!</h2>
  <user-name name="Flavio"></user-name>
</user-information>

Si vous mettez du côté du contenu,<slot></slot>balises, qui servent de contenu par défaut au cas où rien ne serait transmis.

Une disposition de composant compliquée peut nécessiter une meilleure façon d'organiser le contenu, avec également plusieurs emplacements.

C'est pourquoi Vue nous proposeemplacements nommés.

Emplacements nommés

Avec un emplacement nommé, vous pouvez affecter des parties d'un emplacement à une position spécifique dans la présentation de votre modèle de composant, et vous utilisez unslotattribut à n'importe quelle balise, pour attribuer du contenu à cet emplacement.

Tout ce qui se trouve en dehors de toute balise de modèle est ajouté au fichier principalslot.

Pour plus de commodité, j'utilise unpagecomposant de fichier unique dans cet exemple:

<template>
  <div>
    <main>
      <slot></slot>
    </main>
    <aside>
      <slot name="sidebar"></slot>
    </aside>
  </div>
</template>

Voici comment nous pouvons l'utiliser, en fournissant le contenu des slots, dans un composant parent:

<page>
  <template v-slot:sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

<h2>Page title</h2> <p>Page content</p> </page>

Il existe une sténographie pratique,#:

<page>
  <template #sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

<h2>Page title</h2> <p>Page content</p> </page>

Remarque: Vue 2.6 a déprécié leslotattribut en faveur dev-slot, et nécessite qu'il soit ajouté à untemplatetag (pendantslotpourrait être appliqué à n'importe quelle balise)

Emplacements étendus

Dans un slot, nous ne pouvons pas accéder aux données contenues dans le composant enfant depuis le parent.

Vue reconnaît ce cas d'utilisation et nous fournit un moyen de le faire:

<template>
  <div>
    <main>
      <slot v-bind:dogName="dogName"></slot>
    </main>
  </div>
</template>

<script> export default { name: ‘Page’, data: function() { return { dogName: ‘Roger’ } } } </script>

Dans le parent, nous pouvons accéder au nom du chien que nous avons passé en utilisant:

<page>
  <template v-slot="slotProps">
    {{ slotProps.dogName }}
  </template>
</page>

slotPropsest juste une variable que nous avons utilisée pour accéder aux accessoires que nous avons passés. Vous pouvez également éviter de définir une variable uniquement pour contenir les accessoires que vous passez au composant enfant, en déstructurant l'objet à la volée:

<page>
  <template v-slot="{ dogName }">
    {{ dogName }}
  </template>
</page>

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: