Svelteのprops指定まとめ

propsの定義

script内で変数をexportするだけ。

子

<script>
// props
export let props名
</script>

Reactなどと同様に、定義したpropsはHTML属性のように使える。

親

<script>
import 子 from '子ファイルパス'
</script>

<子 props名={値} />

子 -> 親への変数転送（読み取り専用props）

constで定義すると読み取り専用になる。

子

<script>
// 読み取り専用props
export const props名 = 値
</script>

読み取り専用propsは、親コンポーネント内で値を渡しても値の注入はされず、最初に定義したprops値のまま不変。

親

<script>
import 子 from '子ファイルパス'
</script>

// 意味のない記述
<子 props名={値} />

しかし、bind付きで呼び出すと、親コンポーネント内の変数にprops値が代入され、その値を自由に使えるようになる。

親

<script>
import 子 from '子ファイルパス'

let コピー名
</script>

<子 bind:props名={コピー名} />

変数を自動更新（リアクティブ)

letでもconstでもなく、$:で変数を宣言する。

<script>
// 式に含まれる変数値が変化するたびに自動的に更新される
$: リアクティブ変数名 = 式
</script>