1. 属性

当我们在开发程序的时候，不可避免的要进行组件之间的通信。

父子组件传值：

• 父组件中引用并使用子组件，通过属性的方式将值传递给子组件
• 子组件声明父组件传递过来的属性，并使用
• 父组件传过来的值的优先级高于子组件本身定义的，相当于子组件定义接收参数如果带值的话是默认值，父组件不传则展示默认值，传则展示父组件传入的值

父组件:
<script>
	import Header from "./components/Header.svelte";
	let headerContent = "首页"
</script>

<main>
	<Header headerContent={headerContent}/>
</main>

<style>
</style>

子组件：
<script>
    export let headerContent = '不用'
</script>
<h1>
    {headerContent}
</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

执行上述代码，在页面中展示的内容为’首页’，若<Header/> 不传参数，则展示’不用’

2. 属性传递

如果你的组件含有一个对象属性，可以利用...语法将他们传递到另一个组件上去，而不需要逐个指定。

父组件：
<script>
	import Header from "./components/Header.svelte";
	let headerContent = {
		title: '首页',
		desc: '首页描述信息',
		version: '1.0'
	}
</script>

<main>
	<Header {...headerContent}/>
</main>

<style>
</style>

子组件：
<script>

</script>
<h1>
    {$$props.title}
    {$$props.version}
</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

可以通过$$props直接获取需要引用传递到组件中的所有参数，可以在子组件中不export的参数。不建议这样做，直接属性传递，export的那种比较好维护处理

不使用...传值要这样书写哦：
<Header {headerContent}/>

{$$props.headerContent.title}
1
2
3
4

使用…是将headerContent每一个键依次传入，所以$$props应该是{title: ‘’, version: ‘’}，不使用则是{headerContent: {title: ‘’, version: ‘’}}

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~