Svelte 官方入门教程（3）—— Props

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 较难优化这种操作，极小数情况下它很有用。