Svelteで親子コンポーネント間で変数を渡す方法

Svelteにおいて、最も一般的なPropsを使用して親子コンポーネント間で変数を渡す方法を解説します。

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 を記述しています。

以上です。