あらすじ
- 親コンポーネントから子コンポーネントのstateを参照したいとき
- 親コンポーネントから子コンポーネントのメソッドを実行したいとき
このようなとき、どういう書き方をすればいいのかすこし悩んだので
おそらく最適解と思われる方法をメモしておきます。
（もっといい方法あるよ！という人は教えてください）
おそらく最適解
特定の変数や関数を利用したい場合
・bind:変数名や関数名で目的の変数や関数を取得する。
親コンポーネント.svelte
<!-- HTML -->
<Child bind:someFunction={someFunction}/>
<!-- JavaScript -->
<script>
import Child from 'Child.svelte';
let someFunction;
someFunction();
</script>
子コンポーネント.svelte
<!-- JavaScript -->
<script>
export function someFunction(){
// 実行させたい処理
}
</script>
すべての変数や関数を利用したい場合
・bind:thisで子コンポーネントを取得 → 変数や関数を参照して利用する。
親コンポーネント.svelte
<!-- HTML -->
<Child bind:this={child}/>
<!-- JavaScript -->
<script>
import Child from 'Child.svelte';
let child;
child.someFunction();
</script>
子コンポーネント.svelte
<!-- JavaScript -->
<script>
export function someFunction(){
// 実行させたい処理
}
</script>
解説
コンポーネントに対してbind:thisを利用すると、
コンポーネントの情報が取得できるので、
そこから子コンポーネント内の変数や関数にアクセスが可能ということでした。
また、特定の変数や関数だけを取得したい場合は、
bind:○○○で取得できるということでした。
これまでbind:thisは、DOM要素を取得して利用する使い方しかしてなかったので、
この解決法に辿り着くのに数時間悩みましたが
実は公式ドキュメントでも解説されていました。見逃してました😉