Vuetify：使用轮播显示组件

Question

对 this 问题的回复说：

The slot is missing from the docs, you can already do 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>

Answer 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 的后续版本发生了某些变化）

Answer 2

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

Vuetify：使用轮播显示组件

Vuetify: use carousel to display components

vuejs2

vuetify.js