Svelte遗留 API

export let

在符文模式下，组件属性使用 $props 符文声明，允许父组件传入数据。

在遗留模式下，属性使用 export 关键字标记，并可以设置默认值：

<script>
	export let foo;
	export let bar = '默认值';

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

当组件创建时，如果属性值为 undefined，则使用默认值。

与符文模式不同，如果父组件将属性从一个已定义的值更改为 undefined，它不会恢复到初始值。

没有默认值的属性被视为必需的，如果没有提供值，Svelte 会在开发过程中打印警告。你可以通过指定 undefined 作为默认值来消除这个警告：

export let let foo: undefinedfoo = var undefinedundefined;

组件导出

导出的 const、class 或 function 声明不被视为 prop — 相反，它们成为组件 API 的一部分：

Greeter

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

<script lang="ts">
	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>

<script lang="ts">
	import Greeter from './Greeter.svelte';

	let greeter;
</script>

<Greeter bind:this={greeter} />

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

重命名属性

export 关键字可以与声明分开出现。这在重命名属性时很有用，例如在遇到保留字的情况下：

App

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

	// 创建一个 `class` 属性，即使
	// 它是一个保留字
	export { className as class };
</script>

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

	// 创建一个 `class` 属性，即使
	// 它是一个保留字
	export { className as class };
</script>

在 GitHub 编辑此页面

响应式 $: 语句 $$props 和 $$restProps