mirror of https://github.com/sveltejs/svelte
38 lines
755 B
38 lines
755 B
5 months ago
|
---
|
||
|
|
title: <svelte:self>
|
||
|
|
---
|
||
|
|
|
||
|
|
The `<svelte:self>` element allows a component to include itself, recursively.
|
||
|
|
|
||
|
|
It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<script>
|
||
|
|
export let count;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if count > 0}
|
||
|
|
<p>counting down... {count}</p>
|
||
|
|
<svelte:self count={count - 1} />
|
||
|
|
{:else}
|
||
|
|
<p>lift-off!</p>
|
||
|
|
{/if}
|
||
|
|
```
|
||
|
|
|
||
|
|
> [!NOTE]
|
||
|
|
> This concept is obsolete, as components can import themselves:
|
||
|
|
> ```svelte
|
||
|
|
> <!--- file: App.svelte --->
|
||
|
|
> <script>
|
||
|
|
> import Self from './App.svelte'
|
||
|
|
> export let count;
|
||
|
|
> </script>
|
||
|
|
>
|
||
|
|
> {#if count > 0}
|
||
|
|
> <p>counting down... {count}</p>
|
||
|
|
> <Self count={count - 1} />
|
||
|
|
> {:else}
|
||
|
|
> <p>lift-off!</p>
|
||
|
|
> {/if}
|
||
|
|
> ```
|