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 lang="ts">
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><script lang="ts">
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>