Context API 提供了一种机制，让组件之间可以”对话”，而无需通过 props 传递数据和函数，或者触发大量事件。这是一个高级功能，但非常有用。在这个练习中，我们将使用 context API 重新创建 George Nees（生成艺术的先驱之一）的作品 Schotter。
在 Canvas.svelte 中，有一个 addItem 函数用于向画布添加项目。我们可以通过 setContext 使其对 <Canvas> 内的组件（如 <Square>）可用：
Canvas
import { setContext } from 'svelte';
import { SvelteSet } from 'svelte/reactivity';
let { width = 100, height = 100, children } = $props();
let canvas;
let items = new SvelteSet();
setContext('canvas', { addItem });
function addItem(fn) {
$effect(() => {
items.add(fn);
return () => items.delete(fn);
});
}在子组件中，我们现在可以通过 getContext 获取上下文：
Square
import { getContext } from 'svelte';
let { x, y, size, rotate } = $props();
getContext('canvas').addItem(draw);到目前为止，还很... 无聊。让我们为网格添加一些随机性：
App
<div class="container">
<Canvas width={800} height={1200}>
{#each Array(12) as _, c}
{#each Array(22) as _, r}
<Square
x={180 + c * 40 + jitter(r * 2)}
y={180 + r * 40 + jitter(r * 2)}
size={40}
rotate={jitter(r * 0.05)}
/>
{/each}
{/each}
</Canvas>
</div>setContext 和 getContext 必须在组件初始化期间调用，以便正确绑定上下文。键名（这里是 'canvas'）可以是任何你想要的内容，包括非字符串值，这对控制谁可以访问上下文很有用。
你的上下文对象可以包含任何内容，包括响应式状态。这允许你将随时间变化的值传递给子组件：
// 在父组件中 import { setContext } from 'svelte'; let context = $state({...}); setContext('my-context', context);// 在子组件中 import { getContext } from 'svelte'; const context = getContext('my-context');
上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
import Canvas from './Canvas.svelte';
import Square from './Square.svelte';
// we use a seeded random number generator to get consistent jitter
let seed = 1;
function random() {seed *= 16807;
seed %= 2147483647;
return (seed - 1) / 2147483646;
}
function jitter(amount) {return amount * (random() - 0.5);
}
</script>
<div class="container">
<Canvas width={800} height={1200}> {#each Array(12) as _, c} {#each Array(22) as _, r}<Square
x={180 + c * 40} y={180 + r * 40} size={40}/>
{/each} {/each}</Canvas>
</div>
<style>
.container {height: 100%;
aspect-ratio: 2 / 3;
margin: 0 auto;
background: rgb(224, 219, 213);
filter: drop-shadow(0.5em 0.5em 1em rgba(0, 0, 0, 0.1));
}
</style>