Rendu dans une boucle de modèle à l'aide d'éléments de slot Vue
P粉514458863
P粉514458863 2023-09-15 10:37:00
0
1
608

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.

P粉514458863
P粉514458863

répondre à tous(1)
P粉938936304

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal