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

$$props と $$restProps

ルーンモードでは、渡されたすべての props を含むオブジェクトを取得するのは簡単です。$propsルーンを使用します。

レガシーモードでは、$$props$$restPropsを使用します

  • $$propsには、exportキーワードで個別に宣言されていないものも含む、渡されたすべての props が含まれます
  • $$restPropsには、個別に宣言されたものを除く、渡されたすべての props が含まれます

たとえば、<Button>コンポーネントは、variant props を除くすべての props を独自の <button> 要素に渡す必要がある場合があります

<script>
	export let variant;
</script>

<button {...$$restProps} class="variant-{variant} {$$props.class ?? ''}">
	click me
</button>

<style>
	.variant-danger {
		background: red;
	}
</style>

Svelte 3/4 で $$props$$restProps を使用すると、控えめなパフォーマンスのペナルティが発生するため、必要に応じてのみ使用してください。

このページを GitHub で編集する

前へ 次へ