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多个组件

1 个答案: