Зацикливание слотов?

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 через слот в элемент списка.

Answer 1

Как сказал Майкл, вы можете добиться этого поведения через слоты с областями действия .

В вашем компоненте карусели шаблон будет выглядеть следующим образом:

<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 вам может потребоваться получить источник из другого свойства.