Svelte:在父母和孩子之间转移道具

Question

我写了一个简单的Modal组件，它有两个名为button和content:的slots

<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>与其CCD_。我可以只通过Content而不通过<div>吗？或者Content可以以某种方式打开吗？

Thx

Answer 1

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