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

如何解决在父组件中多次放置同一个子组件不会渲染

我有一个名为 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,default: '100%'
    },addOptions: {
      type: Object,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>

感谢您的帮助

解决方法

试试这个，而不是重复自己”

MagicList

并确保您已正确导入父组件中的子组件