What is it?

Set a variable with setContext. The context is then available to children of the component (including slotted content) with getContext

Must be called during component initialisation Context is not inherently reactive. Use stores for reactivity

How to use

Variable

<script>
	import { setContext } from 'svelte';
	import Card from './Card.svelte'
	setContext('name', 'Fabian');
</script>

<Card/>

<script>
	import { getContext } from 'svelte'
	let name = getContext('name')
</script>

<h1>
	Name: {name}
</h1>

Functions

<script>
	import { setContext } from 'svelte';
	import Card from './Card.svelte'
	setContext('name', update);
	let name = "Fabian"
	function update(){
		name = "Fabian2"
	}
</script>
<h1>
	Name: {name}
</h1>
<Card/>

<script>
	import { getContext } from 'svelte'
	let name = getContext('name')
</script>

<button on:click={name}>
	Update
</button>