親からPropsを渡す
親テンプレートから子コンポーネントのPropsに値を渡します。
「親からPropsを渡す」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
子コンポーネントをインポートする
親コンポーネントの先頭で標準の ES import を使用し、子コンポーネントを読み込みます。
<script>
import Greeting from "./Greeting.svelte";
</script>タグを使用する
大文字で始まる名前のタグを記述して、子コンポーネントをレンダリングします。
<Greeting />静的な値を渡す
引用符で囲んだ属性を使って、リテラル文字列を渡します。
<Greeting name="Ada" />動的な値を渡す
値を波かっこで囲んで、JavaScript の式を渡します。
<Greeting name={userName} />同名の省略記法
prop と変数の名前が同じ場合は、省略記法 {name} を使用します。
<Greeting {name} />複数の Props
静的な props、動的な props、省略記法の props を任意の順序で組み合わせられます。
<Card title="Tasks" {items} count={items.length} />Props のスプレッド
{...obj} 構文を使って、props のオブジェクトをスプレッドできます。
<Card {...cardProps} />条件付き Props
三項演算子を組み合わせて、条件に応じた値を指定します。
<Button label={isLoading ? "Saving..." : "Save"} />Boolean の省略記法
値を指定せずに boolean 属性を渡すと、true に設定されます。
<Toggle disabled />Props としての関数
コールバック用に、関数の参照を props として渡せます。
<Modal onClose={() => (open = false)} />オブジェクト Props
関連する複数の値をまとめて扱う場合は、オブジェクト全体を渡します。
<UserCard user={currentUser} />確認問題
変数を prop として渡すにはどうしますか？
復習
コンポーネントをインポートしてタグを使用し、リテラル、式、省略記法、またはスプレッドで props を渡します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「親からPropsを渡す」レッスンは無料ですか？
はい。「親からPropsを渡す」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「親からPropsを渡す」で何を学びますか？
親テンプレートから子コンポーネントのPropsに値を渡します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「親からPropsを渡す」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。