4 svelte 组件之间传值（属性）

本文主要是介绍4 svelte 组件之间传值（属性），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官方网站中介绍到：在任何实际的应用程序中，都需要将数据从一个组件向下传递给它的子组件。为此，我们需要声明属性，通常简称为“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>

这篇关于4 svelte 组件之间传值（属性）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---