跳至主要内容
高级 Svelte Context API setContext 和 getContext

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'）可以是任何你喜欢的，包括非字符串，这对于控制谁可以访问上下文很有用。

你的上下文对象可以包含任何内容，包括响应式状态。这允许你将随时间变化的值传递给子组件。

// in a parent component
import { setContext } from 'svelte';

let context = $state({...});
setContext('my-context', context);
// in a child component
import { getContext } from 'svelte';

const context = getContext('my-context');

在 GitHub 上编辑此页面

上一步 下一步
动画
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>