export let

In runes mode, component props are declared with the $props rune, allowing parent components to pass in data.

In legacy mode, props are marked with the export keyword, and can have a default value:

<script>
	export let foo;
	export let bar = 'default value';

	// Values that are passed in as props
	// are immediately available
	console.log({ foo });
</script>

The default value is used if it would otherwise be undefined when the component is created.

Unlike in runes mode, if the parent component changes a prop from a defined value to undefined, it does not revert to the initial value.

Props without default values are considered required, and Svelte will print a warning during development if no value is provided, which you can squelch by specifying undefined as the default value:

export let let foo: undefinedfoo = var undefinedundefined;

Component exports

An exported const, class or function declaration is not considered a prop — instead, it becomes part of the component’s API:

<script>
	export function greet(name) {
		alert(`hello ${name}!`);
	}
</script>

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

	let greeter;
</script>

<Greeter bind:this={greeter} />

<button on:click={() => greeter.greet('world')}>
	greet
</button>

Renaming props

The export keyword can appear separately from the declaration. This is useful for renaming props, for example in the case of a reserved word:

<script>
	/** @type {string} */
	let className;

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>

<script lang="ts">
	let className: string;

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>