圈出插槽？

Question

在我的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元素传递到list元素。

Answer 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数据，您可能需要从另一个属性获取源。