vuejs2 - Vuetify : use carousel to display components

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 的后续版本发生了变化)