SvelteレガシーAPI

export let

ルーンモードでは、コンポーネントのプロパティは$propsルーンで宣言され、親コンポーネントがデータを渡すことができます。

レガシーモードでは、プロパティはexportキーワードでマークされ、デフォルト値を持たせることができます。

<script>
	export let foo;
	export let bar = 'default value';

	// Values that are passed in as props
	// are immediately available
	console.log({ foo });
</script>

デフォルト値は、コンポーネントが作成されたときにundefinedになる場合に使用されます。

ルーンモードとは異なり、親コンポーネントによってプロパティが定義された値からundefinedに変更された場合、最初の値に戻りません。

デフォルト値を持たないプロパティは必須と見なされ、値が提供されないとSvelteは開発中に警告を出しますが、デフォルト値としてundefinedを指定することで警告を抑えることができます。

export let let foo: undefinedfoo = var undefinedundefined;

コンポーネントのエクスポート

エクスポートされたconst、class、またはfunction宣言はプロパティとは見なされません。代わりに、コンポーネントのAPIの一部になります。

Greeter

<script>
	export function greet(name) {
		alert(`hello ${name}!`);
	}
</script>

App

<script>
	import Greeter from './Greeter.svelte';

	let greeter;
</script>

<Greeter bind:this={greeter} />

<button on:click={() => greeter.greet('world')}>
	greet
</button>

プロパティの名称変更

exportキーワードは宣言とは別に出現することがあります。これは、たとえば予約語の場合にプロパティの名前を変更する場合に役立ちます。

App

<script>
	/** @type {string} */
	let className;

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>

<script lang="ts">
	let className: string;

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>

このページをGitHubで編集

前次

reactive $: ステートメント $$props と $$restProps