Как рендерить слоты в списке?

Question

[hckn]

Есть компонент, по сути список, где слоты должны быть заполнены собственно предметами списка.
Есть компонент, который и есть предмет списка.

В итоге, все предметы рендерятся в первый элемент списка. Как сделать чтобы каждый предмет уходил в отдельный li?

https://codesandbox.io/s/qzrwqppqqq

Answer 1

[0xD34F]

Честно говоря, не очень понятно - а зачем тут вообще слоты. Передавайте в компонент данные обычным параметром, на их основе создавайте список.

Но если всё-таки нужно использовать именно слот - пишите собственную render-функцию. Т.е., вместо шаблона, который есть у вас сейчас, будет что-то вроде

export default {
  render(h) {
    return h('ul', this.$slots['list-item'].map(n => h('li', [ n ])));
  },
};

UPD. Если, помимо собственно списка в будущем планируется добавить в компонент List ещё какие-то элементы, то наверное будет не очень удобно рендерить всё это дело через функцию, поэтому можно написать небольшой компонент-обёртку для элементов слота:

components: {
  SlotWrapper: {
    functional: true,
    render: (h, context) => context.props.node,
  },
},

<li v-for="n in $slots['list-item']">
  <slot-wrapper :node="n"></slot-wrapper>
</li>

Comments

[hckn]

Замечательно. Я как раз сегодня планировал их изучать (пока обходился без них), и вот тебе рабочее применение заодно.

[hckn]

А можно ли иметь несколько рендер функций в одном компоненте? Либо же обычный template и в него вставить в нужное место рендер функцию?

[0xD34F]

hckn, дополнил ответ.

[hckn]

0xD34F, вынос мозга!!! Вам книги впору выпускать. На русском языке я уверен аналогов не будет. Спасибо, мне нужно некоторое время осилить написаное))

[hckn]

Слот нужен чтобы переиспоьзовать обертку-список с любыми компонентами. Например

<app-list>
        <h4 slot="list-heading">List Heading</h4>
        <app-byline slot="list-item"></app-byline>
        <app-byline slot="list-item"></app-byline>
        <app-byline slot="list-item"></app-byline>
        <app-byline slot="list-item"></app-byline>
        <app-byline slot="list-item"></app-byline>
</app-list>

Просто передать данные - это уже будет компонент с конкретным функционалом, который надо будет под каждый проект переделывать, а надо именно обертка-список, в которую подставлять любые компоненты, не только app-byline.