Vuetify V-карусель нескольких компонентов - PullRequest
Новая
       31

Vuetify V-карусель нескольких компонентов

0 голосов
/ 11 февраля 2020

Я хочу отобразить компонент карусели внутри нескольких компонентов. Это мой компонент карусели: 

<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

Большое спасибо

1 Ответ

1 голос
/ 11 февраля 2020

Вы добавите свойство под названием «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>
...