深入理解 Svelte Logic blocks

527字
3分钟
2024-07-02
- Svelte

在 Svelte 中，Logic blocks是用于控制组件渲染的重要工具。本文将详细介绍 Svelte 中的Logic blocks使用方法，包括条件渲染、循环渲染和模板插槽等，帮助开发者更高效地构建动态应用。

Logic blocks的类型

1. 条件渲染（`{#if ...}`）

条件渲染用于根据条件动态地渲染内容。Svelte 提供了 if、else if 和 else 语法来实现条件渲染。

示例：

1
<script>
2
  let loggedIn = false;
3
</script>
4

5
{#if loggedIn}
6
<p>Welcome back!</p>
7
{:else}
8
<p>Please log in.</p>
9
{/if}
10

11
<button on:click="{()" ="">loggedIn = !loggedIn}> Toggle Login State</button>

2. 循环渲染（`{#each ...}`）

循环渲染用于遍历数组或对象，并为每个元素生成对应的 HTML 结构。Svelte 提供了 each 语法来实现循环渲染。

示例：

1
<script>
2
  let items = ["Apple", "Banana", "Cherry"];
3
</script>
4

5
<ul>
6
  {#each items as item, index}
7
  <li>{index + 1}: {item}</li>
8
  {/each}
9
</ul>
10

11
<button on:click="{()" ="">items = [...items, 'New Item']}> Add Item</button>

3. 模板插槽（`<slot>`）

模板插槽用于在组件中定义可插入的内容。Svelte 提供了 slot 语法来实现模板插槽。

示例：

1
<script>
2
  import ChildComponent from "./ChildComponent.svelte";
3
</script>
4

5
<ChildComponent>
6
  <p>This is slot content from the parent component.</p>
7
</ChildComponent>
8

9
<!-- ChildComponent.svelte -->
10
<div>
11
  <h1>Child Component</h1>
12
  <slot></slot>
13
</div>

Logic blocks的高级用法

1. `await` 块

await 块用于处理异步操作的状态，支持 then 和 catch 语法。

示例：

1
<script>
2
  let promise = fetch("https://jsonplaceholder.typicode.com/posts").then(
3
    (response) => response.json(),
4
  );
5
</script>
6

7
{#await promise}
8
<p>Loading...</p>
9
{:then posts}
10
<ul>
11
  {#each posts as post}
12
  <li>{post.title}</li>
13
  {/each}
14
</ul>
15
{:catch error}
16
<p>Error: {error.message}</p>
17
{/await}

2. 动态组件（`<svelte:component>`）

动态组件用于根据条件动态加载和渲染不同的组件。

示例：

1
<script>
2
  import ComponentA from "./ComponentA.svelte";
3
  import ComponentB from "./ComponentB.svelte";
4

5
  let currentComponent = ComponentA;
6
</script>
7

8
<svelte:component this="{currentComponent}" />
9

10
<button on:click="{()" ="">
11
  currentComponent = currentComponent === ComponentA ? ComponentB : ComponentA}>
12
  Toggle Component
13
</button>

3. `key` 块

key 块用于强制重新渲染特定部分的内容，通常用于处理复杂的动画或状态变化。

示例：

1
<script>
2
  let count = 0;
3
</script>
4

5
{#key count}
6
<p>Keyed content: {count}</p>
7
{/key}
8

9
<button on:click="{()" ="">count++}> Increment</button>