Comment créer un carrousel à l'aide de slots ?

Question

Les gens continuent de me montrer la même manière de créer un carrousel en utilisant un tableau d'images. Mais cette approche est rigide car je souhaite que chaque diapositive du carrousel contienne un composant lightbox. Dans ce cas, je ne souhaite pas remplacer la fonctionnalité de la lightbox pour les images que je mets dans le tableau carrousel. N'est-ce pas génial ? Écrivez moins de code et rendez les composants réutilisables dans Vue.js plus utiles que jamais.

J'ai trouvé un très bon exemple d'utilisation des machines à sous. Vue Carousel par SSENSE sur GitHub. En tant que développeur Web pas très compétent, je ne comprends toujours pas comment il a fait en sorte que chaque diapositive affiche un emplacement. Ceci est un modèle

<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

Comme vous pouvez le voir, nous avons un carrousel de composants parents et un diaporama de composants enfants. Le plus difficile pour moi a été de trouver comment en extraire certaines données, comme l'index, le montant, etc., pour créer la fonctionnalité du carrousel. Je conviens qu'il est beaucoup plus simple de créer un carrousel avec un tableau d'images, mais cette approche ne nous permet pas d'utiliser un autre composant au sein du carrousel.

Qu'est-ce que je veux ? Je veux en quelque sorte extraire l'index de chaque emplacement qui glisse dans ce cas, puis je peux facilement créer une fonction pour le carrousel en modifiant l'index. Je pense qu'il existe différentes manières de créer des carrousels avec des emplacements, mais je ne comprends toujours pas bien tous les concepts de Vue et JavaScript, alors pouvez-vous me dire différentes manières de résoudre ce problème.

Answer 1

Vous pouvez utiliser setup 函数的 slots 参数访问组件中的槽元素（也可与 useSlots() 组件一起使用，它相当于 this.$slotsdans l'API des options).

Vous pourrez alors savoir combien d’éléments il contient.

<script setup>
const slots = useSlots()

onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotsElements.length} elements.`)
})
</script>