在插槽内的组件内使用组件...不知道怎么说

Question

我正在使用一个名为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>

所以要使用这个组件，我将它添加到我的刀片文件中，如下所示：

@extends('layouts.app')

@section('content')

    <carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel"></carousel>

    <div class="container">

        <h1 class="p-4 text-lg font-sans">Home</h1>

    </div>

@endsection

我的问题

因此，我希望能够向每张幻灯片添加我想要的任何 HTML，并定义图像名称，因此在理想情况下，我的刀片文件中会包含以下内容：

@extends('layouts.app')

@section('content')

    <carousel class="carousel">

        <slide :style=" { backgroundImage: 'url(\'img/image-1.jpg\')' }">

            <h3>header text</h3>        

            <p>dsadasfhshshsgfgas</p>

        </slide>

        <slide :style=" { backgroundImage: 'url(\'img/image-2.jpg\')' }">

            <h3>header text 2</h3>        

            <p>dsadasdsdsadsafhshshsgfgas</p>

        </slide>

    </carousel>

    <div class="container">

        <h1 class="p-4 text-lg font-sans">Home</h1>

    </div>

@endsection

但是幻灯片不是注册组件，我该怎么做？

对此有另一个想法。

以为我可以为组件中的每个循环创建一个插槽，然后在刀片文件中覆盖该插槽，如下所示：

Carousel.vue

<template>

    <hooper :infiniteScroll="true" class="carousel">

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

            <slot :name="'slide' + index"></slot>

        </slide>

    </hooper>

</template>

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

Answer 1

您的最后一个带有动态插槽名称的示例应该可以工作，除非它使用了错误的 v-slot。您的预期用途可能是<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel">&nbsp; <template #slide1="slotProps">&nbsp; &nbsp; // slotProps are optional here, if you want to pass data from Hooper/Slide to the slot&nbsp; &nbsp; <h2> Header </h2>&nbsp; &nbsp; <p> Text </p>&nbsp; </template>&nbsp;&nbsp; <template #slide2>&nbsp; &nbsp; <h3> Different Header </h3>&nbsp; &nbsp; <div> Different Text </div>&nbsp; </template></carousel>v-slot="slide1" 等价于 v-slot:default="slide1"，例如，您将默认插槽（不可用）接收到的道具分配给名称 slide1。