Export props

Import props into component

<script>
	// single export
	export let data = "default value"
	// get all exported props
	$$props.VALUE
</script>

<script context="module">
	// export function
	export function changeColor() {
	 //CODE
	}
</script>

<h1>Hello {data}</h1>

<script>
	import Component, { changeColor } from './Component.svelte'

	let data = "Fabian"

	let data2 = {
	name: "Fabian",
	gender: "male"
	}
</script>

<!-- single import -->
<Component data={data}/>

<!-- spread import -->
<Component {...data2}/>

<!-- run function -->
<button on:click={changeColor }>
	CLICK
</button>

<aside> ⚠️ for reactive variables use this: StackOverflow

</aside>

Import props

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function sayHello() {
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

<script>
	import Component from './Component.svelte';

	function handleMessage(event) {
		alert(event.detail.text);
	}
</script>

<Component on:message={handleMessage}/>

Reactive functions on prop change

<script>
	export let password
	
	// Run function on prop change
	$: { checkStrength(password) }
</script>

<h1>{password}</h1>

Run function from outside

<script>
	let text = "A button"
	
	export function changeText() {
  	text = "clicked"
	}
</script>

<button>{text}</button>

<script>
	import Component from './Component.svelte'
	let component
</script>

<button on:click={()=>{component.changeText()}}>
	Click to update
</button>

<Component bind:this={component}/>

Import Raw component code

import code from './+page.svelte?raw'

Async import component

{#await import(`../../lib/component/${name}.svelte`) then c}
	<div>
		<svelte:component this={c.default} />
	</div>
{/await}