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
442

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!