Svelteでは、親子コンポーネント間で変数を渡す方法がいくつかあります。
ここでは最も一般的で簡単なPropsを使用する方法を紹介します。
たとえば、親コンポーネントである Parent.svelte から子コンポーネントである Child.svelte へデータを渡す場合は以下のようになります。変数 message を渡しています。
Parent.svelte（親コンポーネント）:
<script>
import Child from './Child.svelte';
let message = 'Hello from Parent';
</script>
<Child message="{message}" />親コンポーネントでは、まず<script>内で子コンポーネントであるChild.svelteをimportします。
次にHTMLにおいて、<Child>タグを記述して変数messageを付与しています。
Child.svelte:（子コンポーネント）：
<script>
export let message; // 受け取る側でexport宣言を行う
</script>
<p>{message}</p>子コンポーネントでは、まず <script>内でexport let messageとして親コンポーネントからmessageを受け取ります。
次にHTMLにおいて、messageを表示するためのHTMLを記述します。
以上です。
この記事の著者
阿部 隼也
Abe Shunya
株式会社プッシュ 代表取締役社長・創業者。東京都出身。横浜市立大学在学中に当社を創業し、SEOなどデジタルマーケティング事業や、ChatGPT入門講座を代表とするプライムアカデミー事業を立ち上げた。技術も好きで、自らコードを書きながらサービスを開発する。
Twitter(X)アカウント
