Итерация по слотам (дочерним элементам) в стройте 3 - PullRequest
2 голосов
/ 28 июня 2019

Я хотел обернуть все слоты моего пользовательского компонента.Но я не мог перебирать слоты.Мой пользовательский компонент выглядит следующим образом:

<Tab>
    <span slot="header">Tab Header 1</span>
    <span slot="header">Tab Header 2</span>
    <span slot="header">Tab Header 3</span>

    ... maybe other slots that are not "header"
</Tab>

Затем внутри Tab.svelte:

{#each ?? as slot}
    <a class="tab-item">
        <each-slot />
    </a>
{/each}

Выше я пытаюсь перебрать дочерние элементы / слоты с именем "header" и обернуть ихс тегом привязки.Как я могу это сделать?

Редактировать : я не хочу передавать объекты JavaScript, такие как:

<Tab headers={['Header 1', 'Header 2', 'Header 3']}>

1 Ответ

3 голосов
/ 30 июня 2019

Невозможно перебирать слоты.Более простой способ сделать то, что вы описываете, - это использовать контекстный API для совместной работы вкладок и их панелей.

Вот пример того, о чем я говорю - нам, вероятно, стоит разобраться с этим и сделать его доступным в виде пакета npm, но, надеюсь, это достаточно хорошая база, чтобы опираться в его текущем состоянии.

...