Passing data between components

Stores

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	✅	✅	✅	Any

Stores allow components to “react” when the content of the store is changed.

If the store is declared “globally” (not in a components) any scripts can access it and interact with it.

Globally declared store

flowchart BT
	subgraph External file
		Store["store"]
	end
	C1[Component1.svelte] <-- "$store" --> Store
	C2[Component2.svelte] <-- "$store" --> Store

Component1.svelte

<script>
  import { store } from "./my-store.ts"
</script>
<input bind:value={$store} />

Component2.svelte

<script>
import { store } from "./my-store.ts"
</script>
The store value is: <var>{$store}</var>

my-store.ts

import { writable } from "svelte/store"
export const store = writable("hello")

In component declared store

flowchart BT
	C1[Component1.svelte] <-- "$store" --> C1
	C2[Component2.svelte] <-- "$store" --> C1

Component1.svelte

<script context="module">
  import { writable } from "svelte/store"
  export const store = writable("hello")
</script>
<input bind:value={$store} />

Component2.svelte

<script>
import { store } from "./Component1.svelte"
</script>
The store value is: <var>{$store}</var>

You are creating a hard/direct dependency between Component1.svelte and Component2.svelte.
Component2.svelte can't exist without Component1.svelte

Global variable

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	✅	❌	✅	Any

Similar to store, a global variable act as a central point of storage. But global variable are not reactive, so you have to implement yourself a method to update the component.

flowchart BT
	subgraph External file
		Store["myVar"]
	end
	C1[Component1.svelte] <-- "myVar" --> Store
	C2[Component2.svelte] <-- "myVar" --> Store

Component1.svelte

<script>
  import { variable } from "./data.js"
</script>
In component1: <var>{variable}</var>

Component2.svelte

<script>
  import { variable } from "./data.js"
</script>
In component2: <var>{variable}</var>

data.js

export let variable = 2
export function updateVariable(value) {
  variable = value
}

App.svelte

<script>
	import Component2 from "./Component2.svelte"
	import Component1 from "./Component1.svelte"
	import { variable, updateVariable } from "./data.js"
	let v = variable
	$: updateVariable(v)
 </script>
 <input bind:value={v} />
 <hr />
 <!-- Forcing reactivity -->
 {#key v}
   <Component1 />
   <br>
   <Component2 />
 {/key}

Svelte event

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	❌	✅	❌	Child → Parent

The data sharing only works in the direction child to parent.

flowchart BT
	Child[Child.svelte] -->|on:myEvent| Parent[Parent.svelte]

Child.svelte

<script>
  import { createEventDispatcher } from "svelte"
  const dispatch = createEventDispatcher()
  let value = 'hello'
</script>
<input bind:value />
<button on:click={() => dispatch('validate', value}}>Validate data</button>

Parent.svelte

<script>
  import Child from "./Child.svelte"
</script>
<Child on:validate={(e) => console.log(e.detail)} />

get/setContext

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	❌	❌	❌	Parent → Children

(Can be bi-directional and reactive, see below)

The data sharing only works in the direction parent to children (and children of children).

Context with normal variable

flowchart TB
	Parent[Parent.svelte]
	Child[Child.svelte]
	GrandChild[GrandChild.svelte]
	Parent -.->|context| Child
	Child -.->|inherit context| GrandChild

Parent.svelte

<script>
  import { setContext } from "svelte"
  import Child from "./Child.svelte"
  setContext("name", "John Doe")
</script>
<Child />

Child.svelte

<script>
  import { getContext } from "svelte"
  import GrandChild from "./GrandChild.svelte"
  const name = getContext("name")
</script>
<p>Hello, my parent name is <var>{name}</var></p>
<GrandChild />

GrandChild.svelte

<script>
  import { getContext } from "svelte"
  const name = getContext("name")
</script>
<p>Hello, one of my parent have the name <var>{name}</var></p>

Context with store

Bi-directional and reactive

flowchart TB
	Parent[Parent.svelte]
	Child[Child.svelte]
	GrandChild[GrandChild.svelte]
	Parent -.->|context| Child
	Child -.->|inherit context| GrandChild
	Child --> Parent
	GrandChild --> Parent

Parent.svelte

<script>
  import { setContext } from "svelte"
  import { writable } from "svelte/store"
  import Child from "./Child.svelte"
  const minAge = writable(80)
  setContext("min-age", minAge)
</script>
<p>The youngest of the family is {$minAge} year old.</p>
<Child />

Child.svelte

<script>
  import { getContext } from "svelte"
  import GrandChild from "./GrandChild.svelte"
  const minAge = getContext("min-age")
  $minAge = 50 // Override the age (Parent is updated)
</script>
<GrandChild />

GrandChild.svelte

<script>
  import { getContext } from "svelte"
  const age = getContext("min-age")
  $age = 25 // Override the age (Parents are updated), initial value
</script>
<div>
  <!-- The age can be edited, all parents will be updated thanks to the store contract -->
  <label>I'm the youngest, and my age is: <input type="number" bind:value={$age} /></label>
</div>

Props

One-way binding (down)

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	❌	✅	❌	Parent → Child

The parent is providing the value to its child. Changing the value in the parent will be reflected in the child.

flowchart TB
	Parent[Parent.svelte]
	Child[Child.svelte]
	Parent -->|"myVar=#123;myVar}"| Child

Parent.svelte

<script>
  import Child from "./Child.svelte"
  let name="Joe"
</script>
My child name is <input bind:value={name} />
<hr />
<Child {name} />

Child.svelte

<script>
  export let name="Rich"
</script>
My name is <var>{name}</var>

Two-way binding

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	❌	✅	✅	Parent ↔ Child

The parent is providing a variable that can be written by the child. Changes made in the parent will be reflected and the child, changes made in children will be send to its parent

flowchart TB
	Parent[Parent.svelte]
	Child[Child.svelte]
	Parent <-->|bind:myVar| Child

Parent.svelte

<script>
  import Child from "./Child.svelte"
  let name="Joe"
</script>
My child name is <input bind:value={name} />
<hr />
<Child bind:name={name} />

Child.svelte

<script>
  export let name="Rich"
</script>
My name is <input bind:value={name} />

One-way binding (up)

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	❌	✅	❌	Child → Parent

The parent is providing a function that will update the parent scope from its children

flowchart TB
	Parent[Parent.svelte]
	Child[Child.svelte]
	Parent -->|"myFunc=#123;myFunc}"| Child
	Child -->|"myFunc()"| Parent

Parent.svelte

<script>
  import Child from "./Child.svelte"
  let name="Joe"
  function setName(value) {
    name = value
  }
</script>
My child name is <var>{name}</var>
<hr />
<Child set={setName} />

Child.svelte

<script>
  export let set
  let myName
</script>
My name is <input bind:value={myName} />
<button on:click={() => set(myName)}>Send</button>

DOM event

In Component	In Javascript/TypeScript	Reactive	Bi-directional	Direction
✅	❌	✅	❌	Child → Parents

Use native DOMEvent to bubble up data from a child to any parent willing to listen to it.

flowchart BT
	Window
	Body
	Parent[Parent.svelte]
	Child[Child.svelte]
	Body -.- Window
	Parent -.- Body
	Child -->|on:myEvent| Parent
	Child -->|on:myEvent| Body
	Child -->|on:myEvent| Window

Parent.svelte

<script>
  import Child from "./Child.svelte"
</script>
<svelte:window on:my-custom-event={(e) => console.log('The choice is '+e.detail)} />
<Child />

Child.svelte

<script>
  function triggerEvent(choice) {
    const event = new CustomEvent('my-custom-event', {detail: choice});
    window.dispatchEvent(event)
  }
</script>
<button on:click={() => triggerEvent('A')}>Select A</button>
<button on:click={() => triggerEvent('B')}>Select B</button>