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.
Situation typique, j'ai longtemps cherché avant de trouver la solution après publication. Et c'est très simple.
Chaque
dans la boucleslide
都可以呈现为动态的<component>