export let

在 runes 模式中,组件 props 通过 $props 符文声明,允许父组件传入数据。

在 legacy 模式中,props 用 export 关键字标记,并且可以有默认值:

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

	// 作为 props 传入的值
	// 立即可用
	console.log({ foo });
</script>

如果组件被创建时它会是 undefined,则会使用默认值。

[!NOTE] 与 runes 模式不同,如果父组件将一个 prop 从有定义的值改为 undefined,它不会回退到初始值。

没有默认值的 props 被视为 必需,如果没有提供值,Svelte 会在开发时打印一条警告,你可以通过将默认值指定为 undefined 来消除它:

export let foo = undefined;

组件导出

被导出的 constclassfunction 声明 被视为 prop——相反,它成为组件 API 的一部分:

<!--- file: Greeter.svelte--->
<script>
	export function greet(name) {
		alert(`hello ${name}!`);
	}
</script>
<!--- file: App.svelte --->
<script>
	import Greeter from './Greeter.svelte';

	let greeter;
</script>

<Greeter bind:this={greeter} />

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

重命名 props

export 关键字可以独立于声明出现。这在重命名 props 时很有用,例如遇到保留字的情况:

<!--- file: App.svelte --->
<script>
	/** @type {string} */
	let className;

	// 创建一个 `class` 属性,尽管
	// 它是一个保留字
	export { className as class };
</script>