Props

到目前为止，咱们只解决外部状态，也就是说，只能在给定的组件中拜访这些值。

在任何真正的应用程序中，都须要将数据从一个组件传递到其子组件。要做到这一点，咱们须要申明属性，通常简称为“ props”。在Svelte中，咱们应用export关键字来实现这一点。编辑Nested.svelte组件：

<script>    export let answer;</script><p>The answer is {answer}</p>
就像 $: ，刚开始可能会感觉有点奇怪。在JavaScript模块中导出通常不是这样工作的！当初就顺其自然吧ーー它很快就会成为你的第二天性。

App.svelte文件：

<script>    import Nested from './Nested.svelte';</script><Nested answer={42}/>

Props默认值

在neted.svelte中，咱们能够很容易地为道具指定默认值：

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

如果咱们当初增加第二个没有传值的组件，它将会应用默认值：

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

输入：

The answer is 42The answer is a mystery

Props传值

如果你有一个属性对象，你或者会这样传值：

<script>    import Info from './Info.svelte';    const pkg = {        name: 'svelte',        version: 3,        speed: 'blazing',        website: 'https://svelte.dev'    };</script><Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>

但在Svelte中，你能够这样：

<script>    import Info from './Info.svelte';    const pkg = {        name: 'svelte',        version: 3,        speed: 'blazing',        website: 'https://svelte.dev'    };</script><Info {...pkg}/>

Info.svelte代码：

<script>    export let name;    export let version;    export let speed;    export let website;</script><p>    The <code>{name}</code> package is {speed} fast.    Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>    and <a href={website}>learn more here</a></p>
当然，如果须要援用传递到组件中的所有键值，包含那些没有通过export申明的键值，则能够间接拜访$props。个别不举荐应用，因为Svelte很难进行优化，但在多数状况下十分有用。

如果想亲自演练以上的性能，能够稳步到Sevlte官网教程中亲自体验：Props