Vuetify v-carousel 多个组件

Question

我想在多个组件中显示轮播组件。那是我的轮播组件：

<template>
<v-container>
    <v-carousel>
        <v-carousel-item v-for="image in images" 
                         :key="image.alt" 
                         :src="image.src" 
                         :alt="image.alt">
        </v-carousel-item>
    </v-carousel>

此组件位于我要显示此旋转木马的其他组件内。在每个组件中，我都有一个对象数组，其中包含我要显示的所有图像我怎样才能通过我的轮播组件传递这些图像？

最好的方法是什么？希望说清楚，我刚开始学习vue

非常感谢

Answer 1

您将向脚本块中的轮播组件添加一个名为 "images" 的属性。然后，您将在别处使用该组件。

轮播组件：

<template>
<v-container>
    <v-carousel>
        <v-carousel-item v-for="image in images" 
                         :key="image.alt" 
                         :src="image.src" 
                         :alt="image.alt">
        </v-carousel-item>
    </v-carousel>
</v-container>
</template>

<script>
export default {
  props: {
    images: {
      type: Array,
      // Arrays and Objects must return factory functions instead of
      // literal values. You can't do `default: []`, you have to do
      // `default: function() { return []; }`... what I wrote was the 
      // short-hand for how to do it with ES6 fat-arrow functions
      default: () => ([]) 
    }
  }
}
</script>

您现在可以在其他地方使用轮播...

<template>
  <div>
    My beautiful carousel: <my-carousel :images="myImages"/>
  </div>
</template>

<script>
import MyCarousel from './MyCarousel.vue'
export default {
  components: { MyCarousel }, // "MyCarousel" converts to either camelcase or title case (my-carousel || MyCarousel)
  data() {
    return {
      myImages: [{ alt: 'A kitten', src: 'http://placekitten.com/200/300' }]
    }
  }
}
</script>

Vuetify v-carousel 多个组件

Vuetify v-carousel multiple components

carousel

vue.js

vuetify.js