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-specific 功能，但适用于所有 Vue 代码:)

Vuetify - 如何循环访问轮播中的多个自定义组件

Vuetify - How to loop through multiple custom components in a carousel

carousel

vue.js

vuetify.js