SvelteSyntaxe de template

{let/const ...}

Les balises de déclaration définissent des variables locales au sein du markup, à l'aide de const ou let :

<script>
	let boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];
</script>

{#each boxes as box}
	{const area = box.width * box.height}
	{const label = `${box.width} ⨉ ${box.height} = ${area}`}

	<p>{label}</p>
{/each}

<script lang="ts">
	let boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];
</script>

{#each boxes as box}
	{const area = box.width * box.height}
	{const label = `${box.width} ⨉ ${box.height} = ${area}`}

	<p>{label}</p>
{/each}

La syntaxe {@const ...} est considérée comme dépréciée — utilisez plutôt les balises de déclaration

Lorsque des valeurs devraient être réactives, vous pouvez utiliser $state et $derived :

Open in playground

<script>
	let user = $state({ name: 'Svelte' });
	let editing = $state(false);
</script>

<p>Bonjour {user.name}</p>
<button onclick={() => editing = true}>modifier le nom</button>

{#if editing}
	{let name = $state(user.name)}
	{const greeting = $derived(`Bonjour ${name}`)}

	<hr>
	<input bind:value={name} />
	<p>{greeting}</p>

	<button onclick={() => {
		user.name = name;
		editing = false;
	}}>enregistrer</button>
{/if}

<script lang="ts">
	let user = $state({ name: 'Svelte' });
	let editing = $state(false);
</script>

<p>Bonjour {user.name}</p>
<button onclick={() => editing = true}>modifier le nom</button>

{#if editing}
	{let name = $state(user.name)}
	{const greeting = $derived(`Bonjour ${name}`)}

	<hr>
	<input bind:value={name} />
	<p>{greeting}</p>

	<button onclick={() => {
		user.name = name;
		editing = false;
	}}>enregistrer</button>
{/if}

Les balises de déclarations peuvent être utilisées n'importe où dans un composant. Elles peuvent référencer des valeurs déclarées en dehors d'elles-mêmes (par exemple dans la balise <script> ou dans des blocs {#each ...}) et seont "visibles" depuis le même scope lexical (c-à-d les éléments frères, ainsi que les enfants de ces frères) :

Open in playground

{const hello = 'bonjour'}
{hello} <!-- 'bonjour' -->
<div>
	{const hello = 'salut'}
	{hello} <!-- 'salut' -->
	<div>
		{hello} <!-- 'salut' -->
	</div>
</div>
{hello} <!-- 'bonjour' -->

Modifier cette page sur Github llms.txt

précédent suivant

{@debug ...} bind: