Props
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 howexport
normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
App.svelte
Nested.svelte
xxxxxxxxxx
5
1
<script>
2
import Nested from './Nested.svelte';
3
</script>
4
5
<Nested answer={42}/>
Console
- "<Nested> was created with unknown prop 'answer'"
xxxxxxxxxx
52
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
init,
7
mount_component,
8
noop,
9
safe_not_equal,
10
transition_in,
11
transition_out
12
} from "svelte/internal";
13
14
import Nested from "./Nested.svelte";
15
16
function create_fragment(ctx) {
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */