Svelte模板语法

use:

Actions（动作）是在元素挂载时调用的函数。它们通过 use: 指令添加，通常会使用 $effect 以便在元素卸载时重置任何状态：

App

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node) {
		// 节点已被挂载到 DOM 中

		$effect(() => {
			// 这里进行设置

			return () => {
				// 这里进行清理
			};
		});
	}
</script>

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

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

	const myaction: Action = (node) => {
		// 节点已被挂载到 DOM 中

		$effect(() => {
			// 这里进行设置

			return () => {
				// 这里进行清理
			};
		});
	};
</script>

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

action 可以带参数调用：

App

<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>

action 只会调用一次（但在服务端渲染期间不会调用）—— 即使参数发生变化也不会再次运行。

Legacy mode
在 $effect 符文出现之前，action 可以返回一个带有 update 和 destroy 方法的对象，如果参数发生变化，update 将被调用并使用最新的参数值。现在推荐使用 effects。

类型定义

Action 接口接收三个可选的类型参数 —— 节点类型（可以是 Element，如果 action 适用于所有元素）、参数，以及由 action 创建的任何自定义事件处理程序：

App

<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: