この演習では、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);
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}
/>