1、声明组件的 Props
到目前为止,我们只处理组件内部的状态,也就是说,这些值只能在给定的组件中访问。
在任何实际的应用程序中,您都需要将数据从一个组件传递到其子组件。为此,我们需要为组件声明 属性,通常缩写为 ‘props’。
参看下方的子组件 Nested.svelte 及父组件 App.svelte
Nested.svelte
<script>
let answer;
</script>
<p>The answer is {answer}</p>
App.svlete
<script>
import Nested from './Nested.svelte';
</script>
<Nested answer={42}/>
在 Svelte 中,我们使用 export
关键字来实现接受父组件传递过来的属性值。
编辑 Nested.svelte
组件:
<script>
export let answer;
</script>
正如
$:
一样,刚开始可能感觉有点怪异,export
在 JavaScript 模块中正常的使用方式也不是这样的!暂且尝试先接受这种书写方式,很快它会成为你的第二天性。
别忘记我们在名称和值相同时,可以使用速记的方式书写,节省一些键盘的敲击量,例如src={src}
的速记为 {src}。
2、属性默认值
在 Nested.svelte
中我们可以很方便就可以为 props
指定默认值:
<script>
export let answer = 'a mystery';
</script>
如果我们现在编写第二个 Nested
组件且没有 answer
属性的话,它会用回默认值:
<Nested answer={42}/>
<Nested/>
3、展开 Props
如果你的对象拥有很多属性,你可以 ‘展开’ 它们到组件中,无需逐个指定:
<Info {...pkg}/>
相反,如果需要传递所有属性给组件,包括没有用
export
声明的属性,可以直接使用$$props
来赋值,不过一般不推荐直接使用它,因为 Svelte 较难优化这种操作,极小数情况下它很有用。