Svelte：在父母和孩子之间转移道具答案

【问题标题】：Svelte: transferring props between parent and childSvelte：在父母和孩子之间转移道具
【发布时间】：2020-04-16 17:23:28
【问题描述】：

我编写了简单的 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) 可以通过任意随机槽将 props 传递给父级，这看起来有点奇怪。

这样做是个好习惯吗？：

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

<slot name="button"/>

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

2) <div slot="content">Content</div> 与其<div> 一起通过。我可以只通过Content 而不通过<div> 还是可以以某种方式打开Content？

谢谢

【问题讨论】：

标签： javascript svelte

【解决方案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/>

【讨论】：