1)是的,这完全可以。另一种方法是使用数据绑定或事件将信息发送给父级。
2)您可以有一个默认的插槽,并且不需要包装元素。示例:
我用两个名为slots
和button
的content
编写了简单的Modal组件:
<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
我已经编写了具有两个名为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/>
1)是的,这完全可以。另一种方法是使用数据绑定或事件将信息发送给父级。
2)您可以有一个默认的插槽,并且不需要包装元素。示例: