Vuetify - 如何在轮播中循环多个自定义组件答案

【问题标题】：Vuetify - How to loop through multiple custom components in a carouselVuetify - 如何在轮播中循环多个自定义组件
【发布时间】：2020-09-08 08:08:59
【问题描述】：

我想知道是否可以在 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 ...)

【问题讨论】：

标签： vue.js vuetify.js carousel

【解决方案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 代码:)

【讨论】：

做了一个小改动并且成功了！我的天啊！非常感谢巴托博士。不确定这是否要求太多，当您有机会时，您能否详细解释一下您提供的代码？具体来说 -> :is="component" 它在代码中做了什么？转折：我导入了所有自定义幻灯片并将它们放入一个对象中，并将其放在 Data 部分下，如下所示： data: () => ({ components: { Carousel_s1, Carousel_s2, Carousel_s3, }, }), };这是正确的做法吗？
好吧，显然堆栈溢出从我之前的评论中取出了所有空格，所以代码部分看起来真的很混乱。对于那个很抱歉！但是，是的，基本上，我将所有幻灯片都包装到一个对象中，并将其放在数据部分下。
很高兴为您提供帮助 :) 您可以在此处找到官方文档：vuejs.org/v2/guide/components.html#Dynamic-Components 简而言之，Vue 的component 是一种元组件；我认为它是另一个组件的占位符，如果组件的特定类型在运行时决定（或在运行时更改），则使用它。您通过绑定（v-bind:is="MyComponent"，或使用快捷方式:is="MyComponent"）提供具体组件。顺便说一句，您不必提供组件对象，如果您注册了组件，也可以使用其名称。