Svelte舊版 API

export let

在符文模式中，元件 props 是使用 $props 符文宣告，允許父元件傳遞資料。

在舊版模式中，props 是使用 export 關鍵字標記，並且可以擁有預設值

<script>
	export let foo;
	export let bar = 'default value';

	// Values that are passed in as props
	// are immediately available
	console.log({ foo });
</script>

當元件被建立時，如果值為 undefined，則會使用預設值。

與符文模式不同，如果父元件將 prop 從一個已定義的值更改為 undefined，它不會還原為初始值。

沒有預設值的 props 被視為必要的，如果沒有提供值，Svelte 將在開發期間列印警告，您可以透過指定 undefined 作為預設值來抑制此警告

export let let foo: undefinedfoo = var undefinedundefined;

元件輸出 (Component exports)

輸出的 const、class 或 function 宣告並不被視為 prop，而是成為元件 API 的一部分

Greeter

<script>
	export function greet(name) {
		alert(`hello ${name}!`);
	}
</script>

App

<script>
	import Greeter from './Greeter.svelte';

	let greeter;
</script>

<Greeter bind:this={greeter} />

<button on:click={() => greeter.greet('world')}>
	greet
</button>

重新命名 props

export 關鍵字可以與宣告分開出現。這對於重新命名 props 很有用，例如在保留字的情況下

App

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

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>

<script lang="ts">
	let className: string;

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>

在 GitHub 上編輯此頁面

上一個下一個

響應式 $: 敘述 $$props 和 $$restProps