循环出插槽？答案

【问题标题】：Looping out slots?循环出插槽？
【发布时间】：2019-09-25 11:26:52
【问题描述】：

在我的 vue 模板中，我有：

<ul>
    <li>slide a</li>
    <li>slide b</li>
    ....
</ul>

但我想使用插槽从父级传递每张幻灯片，所以：

<carousel>
    <img src="abc.jpg">
    <img src="xyz.jpg">
</carousel>

但是我怎样才能循环出传入每个li 的内容？所以我想结束：

 <ul>
    <li><img src="abc.jpg"></li>
    <li><img src="xyz.jpg"></li>
    ....
</ul>

我还希望能够通过插槽将任何 dom 元素传递给列表元素。

【问题讨论】：

这不容易实现。您最好强制用户使用您可以自定义的<carousel-item /> 组件。否则，您只需使用div 或section 而不是ul，这样您就不会依赖ul + li 构造
如果你真的想这样做，最好的办法是使用render函数而不是template
你能详细说明你想要做什么吗？我认为您需要作用域插槽和发出的事件，其中作用域插槽将接收根据发出的事件计算的道具，尽管不完全确定我理解了这个场景。

标签： vue.js vuejs2

【解决方案1】：

正如迈克尔所说，您可以通过scoped slots 实现此行为。

在您的轮播组件中，模板将如下所示：

<ul>
  // TODO : Add a :key with a unique identifier
  <li v-for="item in items">
    <slot name="item" :item="item">
      {{ item }}
    </template>
  </li>
</ul>

而在使用组件的时候，你会做这样的事情：

<carousel :items="images">
  <img #item="{ src }" :src="src">
</carousel>

根据您的images 数据，您可能需要从另一个属性获取源。

【讨论】：