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

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

svelteのbind:ディレクティブの基本的な考え方に触れつつ、bind:thisを使ったDOM要素やコンポーネントの参照方法についてまとめます。

Svelte #Svelte#双方向バインディング

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

サムネイル

svelteのbind:ディレクティブの基本的な考え方に触れつつ、bind:thisを使ったDOM要素やコンポーネントの参照方法についてまとめます。

更新日: 7/29/2025

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>

検索

検索条件に一致する記事が見つかりませんでした