在父组件中多次放入同一个子组件不渲染

Question

我有一个名为 ParentComponent.vue 的父组件。在我的例子中，我有另一个名为 ChildComponent.vue 的组件。我打算在父组件中多次使用子组件。但是，只有一个 ChildComponent 实例被渲染，其余的则根本不渲染。当我在 Developer tools 中检查元素时，没有任何后续子组件的踪迹。我究竟做错了什么？任何帮助将不胜感激。 在某些情况下，组件的样式不会应用于显示的样式。

ParentComponent.vue

<div>

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

ChildComponent.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>

并确保您在父组件中正确导入了子组件