Svelte 官方入门教程(3) - Props

上一讲，详细讲解了 Svelte 的反应性(Reactivity)，它是当下前端框架必备的特性。

本讲讨论的Props，其实跟目前火热的几个都类似，React,Vue，都差不多，当然也有许多的不同之处，总体来说比上面两个可能稍晚弱一些，不过够用了。

一、声明组件的 Props

到目前为止，我们只处理了内部状态——也就是说，值只能在给定的组件内访问。

实例

App.svelte

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

<Nested answer={42}/>

Nested.svelte

<script>
	let answer;
</script>

<p>The answer is {answer}</p>

在任何实际应用程序中，您都需要将数据从一个组件向下传递给它的子组件。 为此，我们需要声明属性，通常缩写为“props”。 在 Svelte 中，我们使用 export 关键字来做到这一点。 编辑 Nested.svelte 组件：

<script>
	export let answer;
</script>

正如 $: 一样，刚开始可能感觉有点怪异，export 在 JavaScript 模块中正常的使用方式也不是这样的！暂且尝试先接受这种书写方式，很快它会成为你的第二天性。

属性默认值

还是使用上面的例子，我们可以在 Nested.svelte 中轻松地为 props 指定默认值：

<script>
	export let answer = 'a mystery';
</script>

如果我们现在添加第二个Nested组件但是我们不添加answer 属性,那么它将回退到默认值

<Nested answer={42}/>
<Nested/>

REPL

属性传递

如果你的组件含有有一个对象属性，可以利用...语法将它们spread（传播）到一个组件上，而不用逐一指定：

good

<Info {...pkg}/>

bad

<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>

相反，如果你需要引用传递到组件中的所有道具，包括未使用export声明的道具，可以利用$$props 直接获取。但通常不建议这么做，因为Svelte难以优化，但在极少数情况下很有用。

REPL

总结

• 使用 export 关键字来实现接受父组件传递过来的属性值。
• 对外设置的属性，使用方不设置走默认值
• 可以利用...语法将它们spread（传播）到一个组件上，而不用逐一指定。