【Svelte】bind:thisでDOM要素やコンポーネント参照

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>