Vuetify：使用轮播展示组件答案

【问题标题】：Vuetify: use carousel to display componentsVuetify：使用轮播展示组件
【发布时间】：2018-01-07 20:17:05
【问题描述】：

对this问题的回复说：

文档中缺少该插槽，您已经可以这样做了。

有人可以提供一个玩具示例或说明如何做到这一点吗？澄清一下，我想要将组件（例如 A.vue、B.vue、C.vue）导入另一个组件（例如 Carousel.vue），然后在轮播中显示所述组件。大致如下：

<template>
  <v-carousel>
    <v-carousel-item v-for="(component, i) in components"></v-carousel-item>
  </v-carousel>
</template>

<script>
  import A from '@/components/A'
  import B from '@/components/B'
  import C from '@/components/C'

  export default {
    components: {
      A,
      B,
      C
  }
</script>

【问题讨论】：

好吧，基本上问题是如果你正确地包含你的组件，你可以把它们放在v-carousel 例如<v-carousel> <your-custom-component/> </v-carousel>。或内部项目：<v-carousel-item> <v-btn>Hi</v-btn> </v-carousel-item> 什么不起作用？
@Traxo 太好了，谢谢。因此，通过将自定义组件放入 <v-carousel-item> 标记中，我得到了一些工作。如果您想发布解决方案，我会接受。否则我会发布我写的作为答案。谢谢。

标签： vuejs2 vuetify.js

【解决方案1】：

问题说如果你正确地包含你的组件，你可以把它们放在v-carousel 例如

<v-carousel>
     <your-custom-component/>
</v-carousel>

或者在v-carousel-item里面也

<v-carousel-item>
    <v-btn>Hi</v-btn>
</v-carousel-item>

由于未知原因，我收到了反对票，所以我认为这还不够清楚，因此扩展解释如下。

为了使<your-custom-component/> 在<v-carousel> 内部工作，<your-custom-component/> 内部的顶级组件必须是v-carousl-item：

// YourCustomComponent.vue
<template>
    <v-carousl-item>
    // ...
    </v-carousl-item>
</template>

（除非在 vuetify 的后续版本中有所改变）

【讨论】：

我接受这个答案是因为部分建议是正确的，但@Traxo 你可能想为后代编辑它（？）。在我查看代码时，我发现 <v-carousel><custom-component/></v-carousel> DOES NOT 工作。但是，` 可以。后者是我最终实现的。
@wayeast 很好，例如，如果your-custom-component 是v-carousl-item，我不清楚你的问题是什么，或者什么不起作用，所以我只是举个例子吧。
投反对票的人可以解释为什么他们认为这个答案没有用吗？
你好，我对这个答案有点困惑，因为当我读到这个问题时，他想在不同的页面上显示三个不同的组件？就像第一次看到组件 A 一样，我单击右键会看到组件 B。这就是我要查找的内容。
@xhist 但是我认为 OP 已经提供了代码？问题在于他的组件结构不正确，正如我所见。

【解决方案2】：

好吧，如果您同意放弃carousel 要求，那么您可能想看看v-window。它提供了您所要求的内容。

【讨论】：