Skip to main content

编译器和 API

客户端组件 API

创建组件(Creating a component)

ts
const component = new Component(options);

客户端组件 — 也就是说，使用 generate: 'dom'（或未指定 generate 选项）编译的组件是一个 JavaScript 类。

英A client-side component — that is, a component compiled with generate: 'dom' (or the generate option left unspecified) is a JavaScript class.

ts
import App from './App.svelte';


const app = new App({
	target: document.body,
	props: {
		// assuming App.svelte contains something like
		// `export let answer`:
		answer: 42
	}
});

可以提供以下初始化选项：

英The following initialisation options can be provided:

option default description
target none 要渲染到的 HTMLElement 或 ShadowRoot。 该选项为必填项
anchor null target 的子级，用于渲染之前的组件
props {} 提供给组件的属性对象
context new Map() 提供给组件的 Map 个根级上下文键值对
hydrate false 见下文
intro false 如果是 true，将在初始渲染时播放转场，而不是等待后续状态更改

target 现有的子级留在原地。

英Existing children of target are left where they are.

hydrate 选项指示 Svelte 升级现有 DOM（通常来自服务器端渲染）而不是创建新元素。 仅当该组件使用 hydratable: true 选项 编译时它才有效。 仅当服务器端渲染代码也使用 hydratable: true 编译时，<head> 元素的水合才能正常工作，这会向 <head> 中的每个元素添加一个标记，以便组件知道在水合期间负责删除哪些元素。

英The hydrate option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the hydratable: true option. Hydration of <head> elements only works properly if the server-side rendering code was also compiled with hydratable: true, which adds a marker to each element in the <head> so that the component knows which elements it's responsible for removing during hydration.

target 的子级通常会被单独留下，而 hydrate: true 会导致所有子级被移走。 因此，anchor 选项不能与 hydrate: true 一起使用。

英Whereas children of target are normally left alone, hydrate: true will cause any children to be removed. For that reason, the anchor option cannot be used alongside hydrate: true.

现有的 DOM 不需要与组件匹配 — Svelte 将会对 DOM 进行 'repair' 处理。

英The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.

index.js
ts
import App from './App.svelte';


const app = new App({
	target: document.querySelector('#server-rendered-html'),
	hydrate: true
});

$set

ts
component.$set(props);

以编程方式在实例上设置 props。 component.$set({ x: 1 }) 相当于组件 <script> 块内的 x = 1。

英Programmatically sets props on an instance. component.$set({ x: 1 }) is equivalent to x = 1 inside the component's <script> block.

调用此方法会安排下一个微任务的更新 — DOM 不同步更新。

英Calling this method schedules an update for the next microtask — the DOM is not updated synchronously.

ts
component.$set({ answer: 42 });

$on

ts
component.$on(ev, callback);

每当组件调度 event 时，都会调用 callback 函数。

英Causes the callback function to be called whenever the component dispatches an event.

返回一个函数，该函数在调用时将删除事件监听器。

英A function is returned that will remove the event listener when called.

index.js
ts
const off = component.$on('selected', (event) => {
	console.log(event.detail.selection);
});


off();

$destroy

ts
component.$destroy();

从 DOM 中删除组件并触发任何 onDestroy 处理程序。

英Removes a component from the DOM and triggers any onDestroy handlers.

组件属性(Component props)

ts
component.prop;
ts
component.prop = value;

如果组件是使用 accessors: true 编译的，则每个实例都将具有与组件的每个 props 相对应的 getter 和 setter。 设置一个值将导致同步更新，而不是 component.$set(...) 引起的默认异步更新。

英If a component is compiled with accessors: true, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a synchronous update, rather than the default async update caused by component.$set(...).

默认情况下，accessors 是 false，除非你编译为自定义元素。

英By default, accessors is false, unless you're compiling as a custom element.

index.js
ts
console.log(component.count);
component.count += 1;
index.ts
ts
console.log(component.count);
component.count += 1;
上一页 svelte/compiler
下一页 服务器端组件 API