スヴェルトテンプレート構文

use

アクションは、要素がマウントされたときに呼び出される関数です。 use: ディレクティブを使用して追加され、通常は $effect を使用して、要素がアンマウントされるときに状態をリセットします。

アプリ

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node) {
		// the node has been mounted in the DOM

		$effect(() => {
			// setup goes here

			return () => {
				// teardown goes here
			};
		});
	}
</script>

<div use:myaction>...</div>

<script lang="ts">
	import type { Action } from 'svelte/action';

	const myaction: Action = (node) => {
		// the node has been mounted in the DOM

		$effect(() => {
			// setup goes here

			return () => {
				// teardown goes here
			};
		});
	};
</script>

<div use:myaction>...</div>

アクションは、引数を使用して呼び出すことができます。

アプリ

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node, data) {
		// ...
	}
</script>

<div use:myaction={data}>...</div>

<script lang="ts">
	import type { Action } from 'svelte/action';

	const myaction: Action = (node, data) => {
		// ...
	};
</script>

<div use:myaction={data}>...</div>

アクションは1回だけ呼び出されます(ただし、サーバーサイドレンダリング中は呼び出されません) 。引数が変更されても再実行されません。

レガシーモード
$effect ルーンより前は、アクションは update と destroy メソッドを持つオブジェクトを返すことができ、引数の最新の値が変更されたときに update が呼び出されます。エフェクトを使用することをお勧めします。

タイピング

Action インターフェイスは、3つのオプションの型引数を受け取ります。ノードタイプ(アクションがすべてに適用される場合は Element にできます)、パラメーター、アクションによって作成されたカスタムイベントハンドラーです

アプリ

<script>
	import { on } from 'svelte/events';

	/**
	 * @type {import('svelte/action').Action<
	 * 	HTMLDivElement,
	 * 	null,
	 * 	{
	 * 		onswiperight: (e: CustomEvent) => void;
	 * 		onswipeleft: (e: CustomEvent) => void;
	 * 		// ...
	 * }>}
	 */
	function gestures(node) {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	}
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>

<script lang="ts">
	import { on } from 'svelte/events';
	import type { Action } from 'svelte/action';

	const gestures: Action<
		HTMLDivElement,
		null,
		{
			onswiperight: (e: CustomEvent) => void;
			onswipeleft: (e: CustomEvent) => void = (node) => {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	};
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>

GitHubでこのページを編集する

前のページ次のページ

bind transition