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

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

以上です。