编译器和 API

客户端组件 API

创建组件永久链接

ts
const component = new Component(options);

客户端组件 — 即使用 generate: 'dom'（或未指定 generate 选项）编译的组件是 JavaScript 类。

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
	}
});

可以提供以下初始化选项

选项	默认值	说明
`target`	无	要渲染到的 `HTMLElement` 或 `ShadowRoot`。此选项是必需的
`anchor`	`null`	`target` 的子项，组件将立即在该子项之前渲染
`props`	`{}`	要提供给组件的属性对象
`上下文`	`new Map()`	向组件提供根级上下文键值对的 `Map`
`hydrate`	`false`	见下文
`intro`	`false`	如果为 `true`，将在初始渲染时播放转换，而不是等待后续状态更改

target 的现有子元素保留在原位。

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

虽然 target 的子元素通常保持不变，但 hydrate: true 会导致删除所有子元素。因此，anchor 选项不能与 hydrate: true 一起使用。

现有的 DOM 不需要与组件匹配 — Svelte 会在进行时“修复”DOM。

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

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

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

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

$on永久链接

ts
component.$on(ev, callback);

导致在组件分派 event 时调用 callback 函数。

返回一个在调用时将移除事件侦听器的函数。

index.js

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

off();

$destroy永久链接

ts
component.$destroy();

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

组件属性永久链接

ts
component.prop;

ts
component.prop = value;

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

默认情况下，accessors 为 false，除非你正在作为自定义元素进行编译。

index.js

ts
console.log(component.count);
component.count += 1;

index.ts

ts
console.log(component.count);
component.count += 1;

上一个 svelte/compiler

下一个服务器端组件 API