Svelteのbind:this
Svelteのbind:
ディレクティブは、主に双方向バインディングに利用されます。
<script lang="ts">
let message = $state('hello');
</script>
<input bind:value={message} />
これに対しbind:this
は、値のbindではなく、DOMノードやコンポーネントのインスタンスへの参照を取得するための読み取り専用となります。
DOM要素への参照
bind:this
をHTML要素に用いると、そのDOMノードへの参照を変数に格納できます。
<script lang="ts">
import { paint } from './gradient.js';
let canvas: HTMLCanvasElement;
$effect(() => {
if (canvas) {
const ctx = canvas.getContext('2d');
paint(ctx);
}
});
</script>
<canvas bind:this={canvas} width={32} height={32}></canvas>
参照先の変数は、要素がDOMにマウントされるまでundefined
です。そのため、その変数を扱う処理は、マウント後である$effect
内やイベントハンドラ内で行う必要があります。
コンポーネントへの参照
コンポーネントに対してbind:this
を使用すると、そのコンポーネントのインスタンスへの参照が取得できます。これで親コンポーネントから子コンポーネントがexport
した関数を呼び出すことができます。
<script lang="ts">
import ShoppingCart from './ShoppingCart.svelte';
let cart: ShoppingCart;
</script>
<ShoppingCart bind:this={cart} />
<button onclick={cart.empty}> Empty shopping cart </button>
<script lang="ts">
export function empty() {
// ...
}
</script>