⛩️

Svelteのprops指定まとめ

2022/09/30に公開約700字

propsの定義

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

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

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

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

<子 props名={} />

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

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

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

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

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

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

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

<script>
importfrom '子ファイルパス'

let コピー名
</script>

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

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

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

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

Discussion

ログインするとコメントできます