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

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>
<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>

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

Answer 1

您的最后一个具有动态插槽名称的示例应该可以工作，只是它错误地使用了v-slot。您的预期用途可能是

<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>

v-slot="slide1"相当于v-slot:default="slidel"，例如，您将默认插槽接收到的道具(不可用(分配给名称slide1。