Svelte系列 --- props

在任何实际的应用程序中，都需要将数据从一个组件传递到其子组件(父子组件通信)。

为此，我们需要为组件声明 属性(properties)，通常缩写为 'props'。

基本使用

<!-- 父组件 App.svelte -->
<script>
  import Nested from './Nested.svelte';
</script>

<!-- 
	1. svelte中的组件，引入后既可直接使用，不需要像vue一样需要先引入后注册
	2. 组件名一般首字母要求大写，以便于区分普通html标签和组件元素
-->
<Nested answer={42}/>


<!-- 子组件 Nested.svelte -->
<script>
  // 我们使用export关键字来接收父组件传入的对应props
  export let answer;
</script>

<p>The answer is {answer}</p>

默认值

<!-- 在子组件中 -->
<script>
  // 我们为接收的props赋值的时候，所赋的值就是props的默认值
  export let answer = 'a mystery'; 
</script>

<!-- 在父组件中 -->
<Nested answer={42}/> <!-- 子组件的answer的值为42 -->
<Nested/> <!-- 子组件 answer的值使用默认值 即'a mystery' -->

展开props

如果你的对象拥有很多属性，你可以 ‘展开’ 它们到组件中，无需逐个指定

<script>
	import Info from './Info.svelte';

	const info = {
		name: 'Klaus',
		age: 23,
		gender: 'male',
		location: 'shanghai'
	}
</script>

<Info name={info.name} age={info.age} gender={info.gender} location={info.location}/>
<!-- 等价于 展开props和ES6中的展开运算符 -->
<Info {...info} />

$$props

在子组件中，有一个特殊变量$$props，这个变量的类型是一个object,默认值是一个空对象

这个对象中存储着所有由父组件传递给子组件的props(无论这个prop有没有在子组件中使用export关键字接收)

<script>
	import Info from './Info.svelte';

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};
</script>

<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
<!-- 
	此时，子组件Info的$$props的值为:
	{
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	}

	tips:一般不推荐直接使用$$props,因为 Svelte 较难优化这种操作，极小数情况下它很有用。
-->