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

问题描述 投票:0回答:1

我用两个名为slotsbuttoncontent编写了简单的Modal组件:

<script>
    let opened = false;

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

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

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

openedopen方法通过<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

我已经编写了具有两个名为button和content的插槽的简单Modal组件:]

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/>
javascript svelte
1个回答
0
投票

1)是的,这完全可以。另一种方法是使用数据绑定或事件将信息发送给父级。

2)您可以有一个默认的插槽,并且不需要包装元素。示例:

© www.soinside.com 2019 - 2024. All rights reserved.