Javascript 在插槽中的组件中使用组件。。。don'；我不知道该怎么说

我正在使用一个名为Hooper的滑块组件。一切都很好，显然我已经为此创建了一个单独的组件，因为我不想在我的全球应用程序中包含它，因为我并不总是使用它

<template>
    <hooper :infiniteScroll="true">
        <slide v-for="(image, index) in images" :style=" { backgroundImage: 'url(\'img/' + image + '\')' }" :key="index">dsadasd</slide>
    </hooper>
</template>

<script>

    import { Hooper, Slide } from 'hooper';
    import 'hooper/dist/hooper.css';

    export default {
        props: [
            'images'
        ],
        name: 'Hooper',
        components: {
            'hooper': Hooper,
            'slide': Slide
        }
    };
</script>

home.blade.php

<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel">
    <template v-slot="slide1">
        <h2>dsdasdadas</h2>
        <p>dsdadasdasds</p>
    </template>
</carousel>

dsdasdadas
DSDADASDS

---

这似乎不起作用，我不确定为什么，有人知道修复方法吗？

上一个使用动态插槽名称的示例应该有效，但它使用了错误的v插槽。您的预期用途可能是

<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel">
  <template #slide1="slotProps">    // slotProps are optional here, if you want to pass data from Hooper/Slide to the slot
    <h2> Header </h2>
    <p> Text </p>
  </template> 
  <template #slide2>
    <h3> Different Header </h3>
    <div> Different Text </div>
  </template>
</carousel>

//如果您想将数据从Hooper/Slide传递到插槽，则此处slotProps是可选的
标题
正文

不同的标题
不同文本

v-slot=“slide1”相当于v-slot:default=“slide1”，例如，您将默认插槽（不可用）接收的道具分配给名称slide1

<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel">
  <template #slide1="slotProps">    // slotProps are optional here, if you want to pass data from Hooper/Slide to the slot
    <h2> Header </h2>
    <p> Text </p>
  </template> 
  <template #slide2>
    <h3> Different Header </h3>
    <div> Different Text </div>
  </template>
</carousel>