在父組件中多次放入同一個子組件不渲染

Question

我有一個名為ParentComponent.vue的父組件。 就我而言，我有另一個名為ChildComponent.vue的組件。 我打算在父組件中多次使用子組件。 但是，僅渲染了一個 ChildComponent 實例，並且rest根本不渲染。 當我在 Developer tools 中檢查元素時，沒有任何后續子組件的蹤跡。 我究竟做錯了什么？ 任何幫助將不勝感激。 在某些情況下，組件的 styles 未應用於所示的那個。

父組件.vue

<div>

<child-component></child-component>
<child-component></child-component>
<child-component></child-component>
 </div>

子組件.vue

<template>
<div>
<p>The quick brown fox jump over the lazy dog</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
}
</script>

編輯我正在使用 vuejs 2.6 和 swiperjs 6.3 我為 swiper 創建了一個組件，以便我可以在整個項目中重用它。 這是我的 swiper 組件

     <div class="swiper-container"
          >
            <div class="swiper-wrapper">
              <div v-for="(slide, index) in virtualData.slides"
                   :key="index"
                   :style="slideStyles"
                   class="swiper-slide"
              >
                <slot :index="swiper.activeIndex" :slide="slide"></slot>
              </div>
            </div>
          </div>

<script>
import Swiper from 'swiper/bundle';

export default {
  name: 'DefaultSwiper',
  data() {
    return {
      swiper: null,
      virtualData: {
        slides: [],
      },
    }
  },

  props: {
    slides: {
      type: [Array, Object, Number],
      required: true,
      default: function () {
        return []
      }
    },
    containerHeight: {
      type: String,
      required: false,
      default: '500px'
    },
    containerWidth: {
      type: String,
      required: false,
      default: '100%'
    },


    addOptions: {
      type: Object,
      required: false,
      default: function () {
        return {};
      }
    },

  },
  computed: {
    slideStyles() {
      return `left: ${this.virtualData.offset}px;`;
    }
  },
  mounted() {
    const self = this;

    this.swiper = new Swiper('.swiper-container', Object.assign({}, self.addOptions, {
      virtual: {
        slides: self.slides,
        renderExternal(data) {
          // assign virtual slides data
          self.virtualData = data;
        },
      },
    }));

    document.querySelector('.swiper-container').style.width = this.containerWidth
    document.querySelector('.swiper-container').style.height = this.containerHeight
 

  },

};
</script>

然后我將在 ParentComponent 中使用 DefaultSwiper，如下所示

<template>
<div>
    <-! Works fine until I add the second one then slides will not show but the swiper container will be showing -->
<default-swiper 
    :slides="['Slide 1', 'Slide 2', 'Slide 3']" 
    v-slot:default="{slide}">
    <div>{{slide}}</div>
</default-swiper>
<-! other codes -->

<-! Doesn't work at all -->
<default-swiper 
    :slides="['path/to/img1', 'path/to/img2', 'path/to/img3']" 
    v-slot:default="{slide}"> 
    <img :src="slide" alt="Image" />
</default-swiper>
</div>
</template>

謝謝你的幫助

Answer 1

試試這個，而不是重復自己”

<child-component v-for="i in 3" :key="i"></child-component>

並確保您已正確導入父組件中的子組件