本文主要是介绍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 组件之间传值(属性)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!