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>

猜你喜欢

转载自blog.csdn.net/weixin_44948981/article/details/134527428
今日推荐