If you have an object of properties, you can 'spread' them on to a component instead of specifying each one:
<Info {...pkg}/>
Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with
export
, you can do so by accessing$$props
directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
App.svelte
Info.svelte
xxxxxxxxxx
12
1
<script>
2
import Info from './Info.svelte';
3
4
const pkg = {
5
name: 'svelte',
6
version: 3,
7
speed: 'blazing',
8
website: 'https://svelte.dev'
9
};
10
</script>
11
12
<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
Console
xxxxxxxxxx
71
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 Info from "./Info.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 */