运行时

svelte

svelte 包公开生命周期函数和上下文 API。

onMount永久链接

ts
function onMount<T>(
	fn: () =>
		| NotFunction<T>
		| Promise<NotFunction<T>>
		| (() => any)
): void;

onMount 函数安排一个回调，以便在组件已挂载到 DOM 后立即运行。它必须在组件初始化期间调用（但不必存在于组件内部；它可以从外部模块调用）。

onMount 不在服务器端组件中运行。

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('the component has mounted');
	});
</script>

如果从 onMount 返回一个函数，则在组件卸载时将调用该函数。

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);

		return () => clearInterval(interval);
	});
</script>

此行为仅在传递给 onMount 的函数同步返回一个值时才有效。async 函数始终返回一个 Promise，因此无法同步返回一个函数。

beforeUpdate永久链接

ts
function beforeUpdate(fn: () => any): void;

计划在任何状态更改后立即在组件更新之前运行回调。

回调首次运行时将在初始onMount之前

<script>
	import { beforeUpdate } from 'svelte';

	beforeUpdate(() => {
		console.log('the component is about to update');
	});
</script>

afterUpdate永久链接

ts
function afterUpdate(fn: () => any): void;

计划在组件更新后立即运行回调。

回调首次运行时将在初始onMount之后

<script>
	import { afterUpdate } from 'svelte';

	afterUpdate(() => {
		console.log('the component just updated');
	});
</script>

onDestroy永久链接

ts
function onDestroy(fn: () => any): void;

计划在组件卸载之前立即运行回调。

在onMount、beforeUpdate、afterUpdate和onDestroy中，这是唯一在服务器端组件中运行的组件。

<script>
	import { onDestroy } from 'svelte';

	onDestroy(() => {
		console.log('the component is being destroyed');
	});
</script>

tick永久链接

ts
function tick(): Promise<void>;

返回一个承诺，一旦任何待定的状态更改被应用，或在没有状态更改时在下一个微任务中解决该承诺。

<script>
	import { beforeUpdate, tick } from 'svelte';

	beforeUpdate(async () => {
		console.log('the component is about to update');
		await tick();
		console.log('the component just updated');
	});
</script>

setContext永久链接

ts
function setContext<T>(key: any, context: T): T;

将任意context对象与当前组件和指定的key相关联，并返回该对象。然后，组件的子组件（包括插槽内容）可以使用getContext访问上下文。

与生命周期函数一样，这必须在组件初始化期间调用。

<script>
	import { setContext } from 'svelte';

	setContext('answer', 42);
</script>

上下文本质上不是反应式的。如果您需要上下文中的反应式值，则可以将存储传递到上下文中，而存储将是反应式的。

getContext永久链接

ts
function getContext<T>(key: any): T;

检索属于具有指定key的最接近父组件的上下文。必须在组件初始化期间调用。

<script>
	import { getContext } from 'svelte';

	const answer = getContext('answer');
</script>

hasContext永久链接

ts
function hasContext(key: any): boolean;

检查给定的key是否已在父组件的上下文中设置。必须在组件初始化期间调用。

<script>
	import { hasContext } from 'svelte';

	if (hasContext('answer')) {
		// do something
	}
</script>

getAllContexts永久链接

ts
function getAllContexts<
	T extends Map<any, any> = Map<any, any>
>(): T;

检索属于最接近父组件的整个上下文映射。必须在组件初始化期间调用。例如，如果您以编程方式创建组件并希望将现有上下文传递给它，这将很有用。

<script>
	import { getAllContexts } from 'svelte';

	const contexts = getAllContexts();
</script>

createEventDispatcher永久链接

ts
function createEventDispatcher<
	EventMap extends Record<string, any> = any
>(): EventDispatcher<EventMap>;

创建一个事件分发器，可用于分发组件事件。事件分发器是可接受两个参数的函数：name和detail。

使用createEventDispatcher创建的组件事件会创建一个CustomEvent。这些事件不会冒泡。detail参数对应于CustomEvent.detail属性，可以包含任何类型的数据。

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('notify', 'detail value')}>Fire Event</button>

子组件分发的事件可以在其父组件中监听。分发事件时提供的任何数据都可以在事件对象的 detail 属性中获得。

<script>
	function callbackFunction(event) {
		console.log(`Notify fired! Detail: ${event.detail}`);
	}
</script>

<Child on:notify={callbackFunction} />

可以通过将第三个参数传递给分发函数来取消事件。如果事件使用 event.preventDefault() 取消，则该函数返回 false，否则返回 true。

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function notify() {
		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
		if (shouldContinue) {
			// no one called preventDefault
		} else {
			// a listener called preventDefault
		}
	}
</script>

你可以对事件分发器进行类型化，以定义它可以接收哪些事件。这将使你的代码在组件内（错误调用会被标记）和使用组件时（事件类型现在已缩小）都更加类型安全。请参阅此处了解如何操作。

类型永久链接

ComponentConstructorOptions永久链接

ts
interface ComponentConstructorOptions<
	Props extends Record<string, any> = Record<string, any>
> {…}

ts
target: Element | Document | ShadowRoot;

ts
anchor?: Element;

ts
props?: Props;

ts
context?: Map<any, any>;

ts
hydrate?: boolean;

ts
intro?: boolean;

ts
$$inline?: boolean;

ComponentEvents永久链接

便利类型，用于获取给定组件期望的事件。示例

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
	  console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />

ts
type ComponentEvents<Component extends SvelteComponent_1> =
	Component extends SvelteComponent<any, infer Events>
		? Events
		: never;

ComponentProps永久链接

便利类型，用于获取给定组件期望的属性。示例

<script lang="ts">
	import type { ComponentProps } from 'svelte';
	import Component from './Component.svelte';

	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
</script>

ts
type ComponentProps<Component extends SvelteComponent_1> =
	Component extends SvelteComponent<infer Props>
		? Props
		: never;

ComponentType永久链接

便利类型，用于获取 Svelte 组件的类型。例如，与使用 <svelte:component> 的动态组件结合使用时很有用。

示例

<script lang="ts">
	import type { ComponentType, SvelteComponent } from 'svelte';
	import Component1 from './Component1.svelte';
	import Component2 from './Component2.svelte';

	const component: ComponentType = someLogic() ? Component1 : Component2;
	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>

<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

ts
type ComponentType<
	Component extends SvelteComponent = SvelteComponent
> = (new (
	options: ComponentConstructorOptions<
		Component extends SvelteComponent<infer Props>
			? Props
			: Record<string, any>
	>
) => Component) & {
	/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
	element?: typeof HTMLElement;
};

SvelteComponent永久链接

具有某些次要开发增强功能的 Svelte 组件的基类。在 dev=true 时使用。

可用于创建强类型 Svelte 组件。

示例：永久链接

你在 npm 上有一个名为 component-library 的组件库，从中导出一个名为 MyComponent 的组件。对于 Svelte+TypeScript 用户，你希望提供类型化。因此，你创建了一个 index.d.ts

ts
import { SvelteComponent } from "svelte";
export class MyComponent extends SvelteComponent<{foo: string}> {}

进行此类型化后，使用 Svelte 扩展的 IDE（如 VS Code）可以提供智能感知，并在 Svelte 文件中使用 TypeScript 组件，如下所示

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />

ts
class SvelteComponent<
	Props extends Record<string, any> = any,
	Events extends Record<string, any> = any,
	Slots extends Record<string, any> = any
> extends SvelteComponent_1<Props, Events> {…}

ts
[prop: string]: any;

ts
constructor(options: ComponentConstructorOptions<Props>);

ts
$capture_state(): void;

ts
$inject_state(): void;

SvelteComponentTyped永久链接

改用 SvelteComponent。有关更多信息，请参阅 PR：https://github.com/sveltejs/svelte/pull/8512

ts
class SvelteComponentTyped<
	Props extends Record<string, any> = any,
	Events extends Record<string, any> = any,
	Slots extends Record<string, any> = any
> extends SvelteComponent<Props, Events, Slots> {}

上一个特殊元素

下一个 svelte/store