svelte/action

动作是元素创建时调用的函数。它们可以返回一个带有 destroy 方法的对象，该方法在元素卸载后调用

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

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div use:foo />

动作可以有一个参数。如果返回值有一个 update 方法，那么每当该参数更改时，Svelte 应用标记更新后，该方法将立即被调用。

不用担心我们为每个组件实例重新声明 foo 函数 — Svelte 会将不依赖于本地状态的任何函数提升到组件定义之外。

<script>
	/** @type {string} */
	export let bar;

	/** @type {import('svelte/action').Action<HTMLElement, string>}  */
	function foo(node, bar) {
		// the node has been mounted in the DOM

		return {
			update(bar) {
				// the value of `bar` has changed
			},

			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div use:foo={bar} />

属性永久链接

有时，动作会发出自定义事件并应用自定义属性到它们应用到的元素。为了支持这一点，类型为 Action 或 ActionReturn 的动作可以有一个最后一个参数，Attributes

<script>
	/**
	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
	 */
	function foo(node, { prop }) {
		// the node has been mounted in the DOM

		//...LOGIC
		node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div on:emit={handleEmit} use:foo={{ prop: 'someValue' }} />

类型永久链接

Action永久链接

动作是元素创建时调用的函数。你可以使用此界面来输入此类动作。以下示例定义了一个仅适用于 <div> 元素的动作，并且可以接受一个具有默认值的参数

ts
export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
  // ...
}

Action<HTMLDivElement> 和 Action<HTMLDivElement, undefined> 都表示该动作不接受任何参数。

你可以从函数返回一个带有 update 和 destroy 方法的对象，并输入它具有的其他属性和事件。有关更多详细信息，请参阅界面 ActionReturn。

文档：https://svelte.js.cn/docs/svelte-action

ts
interface Action<
	Element = HTMLElement,
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

ts
<Node extends Element>(
	...args: undefined extends Parameter
		? [node: Node, parameter?: Parameter]
		: [node: Node, parameter: Parameter]
): void | ActionReturn<Parameter, Attributes>;

ActionReturn永久链接

动作可以返回一个包含此界面中定义的两个属性的对象。两者都是可选的。

• update：动作可以有一个参数。每当该参数更改时，都会调用此方法，即 Svelte 对标记应用更新后立即调用。ActionReturn 和 ActionReturn<undefined> 都表示该动作不接受任何参数。
• destroy：元素卸载后调用的方法

此外，你可以指定动作在应用的元素上启用的其他属性和事件。这仅适用于 TypeScript 类型，在运行时没有效果。

示例用法

ts
interface Attributes {
	newprop?: string;
	'on:event': (e: CustomEvent<boolean>) => void;
}

export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
	// ...
	return {
		update: (updatedParameter) => {...},
		destroy: () => {...}
	};
}

文档：https://svelte.js.cn/docs/svelte-action

ts
interface ActionReturn<
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

ts
update?: (parameter: Parameter) => void;

ts
destroy?: () => void;