Vuetify-如何在旋转木马中循环使用多个自定义组件

Question

我想知道是否可以在Vueitfy中的旋转木马中循环使用多个自定义组件？

我已经在下面的carousel.vue文件中导入并注册了三个组件，但是，我不确定如何循环使用v-carousel-item标记中的所有注册组件。

到目前为止，我的旋转木马中有什么：

<template>  
<v-carousel
hide-delimiter-background
delimiter-icon="mdi-minus"
width="100%"
height="700"
>
<v-carousel-item
v-for="(component, i) in components"
:key= i
reverse-transition="slide-fade"
transition="slide-fade"
>   
</v-carousel-item>
</v-carousel>
</template>  
<script>
import Carousel_s1 from './Carousel_s1.vue'
import Carousel_s2 from './Carousel_s2.vue'
import Carousel_s3 from './Carousel_s3.vue'
export default {
name: 'Carousel',
components: {
Carousel_s1,
Carousel_s2,
Carousel_s3,
},
(continue my code ...)

Answer 1

在v-carousel-item中，您可以使用Vue的动态组件机制来显示正确的组件机制：

<v-carousel-item
v-for="(component, i) in components"
:key="i"
reverse-transition="slide-fade"
transition="slide-fade"
<component :is="component"></component>
</v-carousel-item>

(顺便说一句，你也应该用引号包装你的key值，就像我在示例代码中所做的那样(

请注意，这不是Vuetify的特定功能，但适用于所有Vue代码：(