官方网站中介绍到:在任何实际的应用程序中,都需要将数据从一个组件向下传递给它的子组件。为此,我们需要声明属性,通常简称为“props”。在Svelte中,我们使用export关键字来完成此操作。
1 传值
app.svelte:
<script>
import Nested from './Nested.svelte';
</script>
<Nested answer={42}/>
此处将answer 属性传入 在子组件中需要接收。
Nested.svelte
<script>
export let answer;
</script>
<p>The answer is {answer}</p>
子组件接收父组件传入进的值并进行回显
此处无异于Vue中的使用props父子组件传值.
2 默认值
Nested.svelte
<script>
export let answer = 'a mystery';
</script>
app.svelte 中引入的时候不传值 会使用默认值
<script>
import Nested from './Nested.svelte';
</script>
<Nested/>
3 对象属性传递
可以利用...
语法将它们传播到一个组件上,而不用逐一指定:
app.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>
软件名{name}
下载速度{speed}
版本{version}
官网{website}
</p>