Svelte：在 parent 和 child 之间传输道具

Question

我写了一个简单的 Modal 组件，有两个 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"

传递给 parent 组件

在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) 道具可以通过任何随机插槽传递给 parent 看起来有点奇怪。

这样做是个好习惯吗？:

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

<slot name="button"/>

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

2) <div slot="content">Content</div> 及其 <div> 通过。我可以只传递 Content 而不传递 <div> 还是可以 Content 以某种方式展开？

感谢

Answer 1

1) 是的，完全没问题。替代方法是使用 data-binding 或事件将信息发送到 parent.

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/>

Svelte：在 parent 和 child 之间传输道具

Svelte: transferring props between parent and child

javascript

svelte