Svelte: перенос реквизита между родителем и ребенком - PullRequest
Новая
       7

Svelte: перенос реквизита между родителем и ребенком

0 голосов
/ 16 апреля 2020

Я написал простой модальный компонент с двумя slots именами button и content: 

<script>
    let opened = false;

    function open() {
        opened = true;
    }
</script>

<slot name="button" opened={opened} open={open}/>

{#if opened}
    <slot name="content"/>
{/if}

Кроме того, opened и open -метод передаются в родительский компонент через <slot name="button"

В App.svelte: 

<script>
    import Modal from './Modal.svelte';
</script>

<Modal let:opened let:open>
    <button slot="button" on:click={open} class:opened>Open</button>
    <div slot="content">Content</div>
</Modal>

Итак, есть два вопроса:

1) Это выглядит немного странно, что реквизиты могут быть переданы родителю только через любой случайный слот.

Это хорошая практика, чтобы сделать это так?: 

<slot opened={opened} open={open}/>

<slot name="button"/>

{#if opened}
    <slot name="content"/>
{/if}

2) <div slot="content">Content</div> передано с его <div>. Могу ли я пройти только Content без <div> или Content можно как-нибудь развернуть?

Thx

1 Ответ

1 голос
/ 17 апреля 2020

1) Да, все в порядке. Альтернативой является использование привязки данных или событий для отправки информации родителю.

2) У вас может быть слот по умолчанию, и для него не требуется элемент обтекания. Пример: 

<!-- Modal.svelte -->

<!-- named slot -->
<slot name="button"/>

<!-- unnamed/default slot -->
<slot/>

<!-- usage -->
<Modal>
  <button slot="button"/>
  I'm unwrapped in the default slot! 
<slot/>
...