編譯器和 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
	}
});

可以提供下列初始化選項

選項	預設值	說明
`目標`	無	要渲染到的 `HTMLElement` 或 `ShadowRoot`。此選項為必要
`錨點`	`null`	`target` 的子項目，用於在之前立即渲染元件
`props`	`{}`	要提供給元件的屬性物件
`context`	`new Map()`	要提供給元件的根層級 context 鍵值對 `Map`
`hydrate`	`false`	見下方
`intro`	`false`	如果為 `true`，將在初始渲染時播放轉場，而不是等到後續狀態變更

target 的現有子項目保持原樣。

hydrate 選項指示 Svelte 升級現有的 DOM (通常來自伺服器端渲染)，而不是建立新元素。只有在元件使用 hydratable: true 選項編譯時，此選項才會運作。<head> 元素的 Hydration 只有在伺服器端渲染程式碼也使用 hydratable: true 編譯時才能正常運作，這會在 <head> 中的每個元素加入標記，讓元件知道在 Hydration 期間要移除哪些元素。

儘管 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 編譯，每個執行個體都會有取得器和設定器，分別對應元件的每個屬性。設定值會導致同步更新，而不是 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