Passing Props
Passing props from parent to children is quite easy in Svelte. But the other way around is a little tricky.
I recommend using stores where it is completely necessary. For simpler cases, we can use component binding.
Component Binding
We can bind component props so that they maintain the same state across.
Header.svelte
<script>
import Nav from "./Nav.svelte";
export let isDarkMode = false;
</script>
<Nav bind:isDarkMode />Now since the variable isDarkMode is bound to Nav, any changes to it in the <Nav /> will reflect in the <Header />.
Nav.svelte
<script>
import ShowCurrentMode from "./ShowCurrentMode.svelte";
export let isDarkMode;
</script>
<button on:click={() => isDarkMode = !isDarkMode} >Switch</button>
<ShowCurrentMode bind:isDarkMode />This can be bound to multiple components inside <Nav />.
ShowCurrentMode.svelte
<script>
export let isDarkMode;
</script>
<p>Current mode is {isDarkMode ? "Dark" : "Light"}</p>Now, all three components will have the variable isDarkMode in the same state.
Any change in its state in the <Nav /> will change reflect in the parent component <Header /> and also at the child component <ShowCurrentMode />.