javascript - 如何用数组替换 vuejs 中的插槽？

Question

我正在制作一个自定义组件（滑块），但现在它只通过数组传递图像，我想要的是我可以通过插槽插入子组件而不使用数组，而不是传递图像。

<div class="carousel">
<transition-group tag='ul' class="clearfix slide" name='image'>
  <li v-for='(image,index) in imglist' :key='index' v-show='index===mark'>
    <a><img :src="image"></a>
  </li>
</transition-group>
<div class="bullet">
  <span v-for='(item,index) in imglist.length' v-bind:key="item" :class="{'active':index===mark}" @click='change(index)'></span>
</div>

这是脚本

 data() {
    return {
      mark: 0,
       imglist: ['images/bn1.jpg',
    'images/bn2.jpg',
    'images/bn3.jpg'
  ]
    }
  },
  created() {
    this.play()
  },
  methods: {
    change(i) {
      this.mark = i
    },
    autoPlay() {
      this.mark++;
      if (this.mark === this.imglist.length) {
        this.mark = 0;
        return
      }
    },
    play() {
      setInterval(this.autoPlay, 3000)
    }
  }
}

标签： javascriptvue.js