SvelteSlots

Svelte Slots

就像元素可以有子元素一样......<div>

<p>I'm a child of the div</p>

</div>...组件也可以。然而,在一个组件可以接受子元素之前,它需要知道把他们放在哪里。我们使用 ​<slot>​ 元素来做到这一点。将其放入 ​Box.svelte​ 中:<div class="box">

<slot></slot>

</div>你现在可以把东西放在盒子里了:<Box>

<h2>Hello!</h2>

<p>This is a box. It can contain anything.</p>

</Box>示例代码App.svelte<script>

import Box from './Box.svelte';

</script>

<Box>

<h2>Hello!</h2>

<p>This is a box. It can contain anything.</p>

</Box>Box.svelte<style>

.box {

width: 300px;

border: 1px solid #aaa;

border-radius: 2px;

box-shadow: 2px 2px 8px rgba(0,0,0,0.1);

padding: 1em;

margin: 0 0 1em 0;

}

</style>

<div class="box">

<slot></slot>

</div>