Svelte旧版 API

export let

在符文模式下，组件道具使用 $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，它不会恢复为初始值。

没有默认值的道具被认为是必需的，如果未提供值，Svelte 将在开发期间打印警告，可以通过将 undefined 指定为默认值来消除警告

export let let foo: undefinedfoo = var undefinedundefined;

组件导出

导出的 const、class 或 function 声明不被视为道具 - 相反，它成为组件 API 的一部分

问候者

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

应用

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

	let greeter;
</script>

<Greeter bind:this={greeter} />

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

重命名道具

export 关键字可以与声明分开出现。例如，在保留字的情况下，这对于重命名道具很有用

应用

<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