Skip to main content

So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.

In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare properties, generally shortened to 'props'. In Svelte, we do that with the export keyword. Edit the Nested.svelte component:

<script>
	export let answer;
</script>

Just like $:, this may feel a little weird at first. That's not how export normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.

App.svelte
Nested.svelte
<script>
import Nested from './Nested.svelte';
</script>

<Nested answer={42} />

/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
create_component,
destroy_component,
init,
mount_component,
noop,
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";

import "svelte/internal/disclose-version";
import Nested from './Nested.svelte';

function create_fragment(ctx) {
let nested;
let current;
nested = new Nested({ props: { answer: 42 } });

return {
c() {
create_component(nested.$$.fragment);
},
m(target, anchor) {
mount_component(nested, target, anchor);
current = true;
},
p: noop,
i(local) {
if (current) return;
transition_in(nested.$$.fragment, local);
current = true;
},
o(local) {
transition_out(nested.$$.fragment, local);
current = false;
},
d(detaching) {
destroy_component(nested, detaching);
}
};
}

class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
}
}

export default App;
result = svelte.compile(source, {
generate:
css:
});
/* Add a <style> tag to see compiled CSS */