メインコンテンツにスキップ

この演習では、App.svelteで、PackageInfo.svelteが期待するname propを渡すのを忘れており、<code>要素が空でnpmリンクが壊れています。

propを追加することで修正できます...

App
<PackageInfo
	name={pkg.name}
	version={pkg.version}
	description={pkg.description}
	website={pkg.website}
/>

...しかし、pkgのプロパティはコンポーネントが期待するpropsに対応しているため、代わりにコンポーネントに「スプレッド」することができます

App
<PackageInfo {...pkg} />

逆に、PackageInfo.svelteでは、レストプロパティを使用して、コンポーネントに渡されたすべてのpropsを含むオブジェクトを取得できます...

let { name, ...stuff } = $props();

...または、分割代入をまったくスキップすることで

let stuff = $props();

...その場合、オブジェクトパスでプロパティにアクセスできます

console.log(stuff.name, stuff.version, stuff.description, stuff.website);

このページをGitHubで編集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	import PackageInfo from './PackageInfo.svelte';
 
	const pkg = {
		name: 'svelte',
		version: 5,
		description: 'blazing fast',
		website: 'https://svelte.dokyumento.jp'
	};
</script>
 
<PackageInfo
	version={pkg.version}
	description={pkg.description}
	website={pkg.website}
/>