Vuetify：使用走马灯展示组件

Question

响应此问题的回答如下:

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

有人能提供一个玩具示例或解释如何做到这一点吗？为了澄清，我想要导入组件（例如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>

- wayeast

---

基本上问题是说，如果您正确地包含了组件，您可以将它们放在 v-carousel 中，例如 <v-carousel> <your-custom-component/> </v-carousel>。或者也可以放在项目中：<v-carousel-item> <v-btn>Hi</v-btn> </v-carousel-item>。什么没有起作用？ - Traxo

@Traxo不错，谢谢。所以我把我的自定义组件放在<v-carousel-item>标签里让它正常工作了。如果您想发布解决方案，我会接受的。否则我会把我写的东西发表为答案。谢谢。 - wayeast

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-carousel-item：

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

除非在后续的vuetify版本中发生了变化，否则将会是这样。

- Traxo

---

我接受这个答案，因为其中一部分建议是正确的，但是@Traxo，您可能希望为后人编辑它。在我的代码探索中，我发现<v-carousel><custom-component/></v-carousel>不起作用。然而，<v-carousel><v-carousel-item><custom-component/></v-carousel-item></v-carousel>是可以的。后者是我最终实现的。 - wayeast

@wayeast 嗯，它有效，比如如果 your-custom-component 是 v-carousel-item，从你的问题中并不清楚你想要实现什么，或者哪里出了问题，所以我只是举了一个例子。 - Traxo

能否请投反对票的人解释一下他们为什么认为这个回答不是有用的？ - Traxo

你好，我对这个答案有点困惑，因为按照我的理解，他想在不同的页面显示三个不同的组件？比如，我先看到组件A，然后点击右侧就能看到组件B。这正是我所需要的。 - Eric1101000101

@xhist 但是我认为OP已经提供了相应的代码？问题只是他的组件结构不正确，我可以看出来。 - Traxo

Answer 2

如果您可以放弃carousel的要求，那么您可能需要查看v-window。它提供了您所需的功能。

最初的回答

- untill