Rendu dans une boucle de modèle à l'aide d'éléments de slot Vue

Question

J'essaie de transmettre le HTML des diapositives à un composant, puis de les restituer dans un autre composant en utilisant des slots

// carousel.blade.php
<my-carousel>
<template v-slot:slides>
    <div>slide 1</div>
    <div>slide 2</div>
</template>
</my-carousel>

MyCarousel 然后将每个 <div> Convertir en diaporama Swiper.

Je peux utiliser slots.slides() pour parcourir les éléments passés dans le slot. Ma question est la suivante : comment puis-je restituer le contenu de cet élément dans un slide ?

// MyCarousel.vue
<script setup>
import { useSlots } from "vue";

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const slots = useSlots();

console.log(slots.slides());
</script>

<template>
    <div>
        <swiper>
            <swiper-slide v-for="(slide, key) in slots.slides()">
                <!-- 渲染当前幻灯片/插槽内容 -->
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
</style>

Je sais que je peux utiliser Swiper directement dans la vue Blade, mais j'essaie d'éviter de le faire et de convertir la diapositive en uniquement lorsqu'elle est enveloppée dans un composant Vue. Le reste du temps, il utilisera du HTML brut.

Answer 1

Situation typique, j'ai longtemps cherché avant de trouver la solution après publication. Et c'est très simple.

Chaque slide都可以呈现为动态的<component>

dans la boucle

<script setup>
import { useSlots } from "vue";

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const slots = useSlots();

console.log(slots.slides());
</script>

<template>
    <div>
        <swiper>
            <swiper-slide v-for="(slide, key) in slots.slides()" v-bind="props">
                <component :is="slide" />
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
</style>