社名変更のお知らせ(2月~)

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

以上です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です