组件的输入被称为*props*，这是*properties*的简称。您向组件传递 props 的方式就像向元素传递属性一样：

```svelte
<!--- file: App.svelte --->
<script>
	import MyComponent from './MyComponent.svelte';
</script>

<MyComponent adjective="cool" />
```

在另一方面，在`MyComponent.svelte`内部，我们可以通过`$props`属性接收 props...

```svelte
<!--- file: MyComponent.svelte --->
<script>
	let props = $props();
</script>

<p>this component is {props.adjective}</p>
```

...尽管更常见的是，你会[*解构*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)你的 props：

```svelte
<!--- file: MyComponent.svelte --->
<script>
	let +++{ adjective }+++ = $props();
</script>

<p>this component is {+++adjective+++}</p>
```

回退值

解构允许我们声明回退值，这些值在父组件未设置给定属性（或值是 `undefined`）时使用：

```js
let { adjective = 'happy' } = $props();
```

> \[!注意\] 回退值不会被转换为响应式状态代理（有关更多信息，请参阅[更新属性](#Updating-props)）

重命名属性

我们还可以使用解构赋值来重命名 props，这在它们是无效标识符或 JavaScript 关键字（如`super`）时是必要的：

```js
let { super: trouper = 'lights are gonna find me' } = $props();
```

## Rest props

最后，我们可以使用一个 *剩余属性* 来获取，嗯，其余的 props：

```js
let { a, b, c, ...others } = $props();
```

更新属性

组件内部属性更新时对属性的引用也会更新——当 `count` 在 `App.svelte` 中变化时，它也会在 `Child.svelte` 中变化。但子组件可以临时覆盖属性值，这在处理未保存的短暂状态时可能很有用（[演示](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)）。

```svelte
<!--- file: App.svelte --->
<script>
	import Child from './Child.svelte';

	let count = $state(0);
</script>

<button onclick={() => (count += 1)}>
	clicks (parent): {count}
</button>

<Child {count} />
```

```svelte
<!--- file: Child.svelte --->
<script>
	let { count } = $props();
</script>

<button onclick={() => (count += 1)}>
	clicks (child): {count}
</button>
```

虽然您可以临时重新分配属性，但除非它们是可绑定的，否则您不应该修改属性。

如果属性是一个普通对象，则变异将没有效果（[demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)）：

```svelte
<!--- file: App.svelte --->
<script>
	import Child from './Child.svelte';
</script>

<Child object={{ count: 0 }} />
```

```svelte
<!--- file: Child.svelte --->
<script>
	let { object } = $props();
</script>

<button onclick={() => {
	// has no effect
	object.count += 1
}}>
	clicks: {object.count}
</button>
```

如果属性是一个响应式状态代理，那么突变*将*产生影响，但你会看到一个[`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation)警告，因为组件正在修改不属于它的状态([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==))：

```svelte
<!--- file: App.svelte --->
<script>
	import Child from './Child.svelte';

	let object = $state({count: 0});
</script>

<Child {object} />
```

```svelte
<!--- file: Child.svelte --->
<script>
	let { object } = $props();
</script>

<button onclick={() => {
	// will cause the count below to update,
	// but with a warning. Don't mutate
	// objects you don't own!
	object.count += 1
}}>
	clicks: {object.count}
</button>
```

备用值的属性未使用`$bindable`声明时保持不变——它不会被转换为响应式状态代理——这意味着变更不会引起更新（[示例](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA)）

```svelte
<!--- file: Child.svelte --->
<script>
	let { object = { count: 0 } } = $props();
</script>

<button onclick={() => {
	// has no effect if the fallback value is used
	object.count += 1
}}>
	clicks: {object.count}
</button>
```

总结：不要修改 props。要么使用回调 props 来传递变化，或者——如果父元素和子元素应该共享同一个对象——使用[`$bindable`]($bindable) rune。

类型安全

您可以通过注释您的 props 来为组件添加类型安全，就像您对任何其他变量声明一样。在 TypeScript 中，这可能看起来像这样...

```svelte
<script lang="ts">
	let { adjective }: { adjective: string } = $props();
</script>
```

...當在 JSDoc 中可以這樣做：

```svelte
<script>
	/** @type {{ adjective: string }} */
	let { adjective } = $props();
</script>
```

当然，您可以将类型声明与注解分开：

```svelte
<script lang="ts">
	interface Props {
		adjective: string;
	}

	let { adjective }: Props = $props();
</script>
```

> \[!注意\] 本地 DOM 元素的接口在`svelte/elements`模块中提供（见[类型包装组件](typescript#Typing-wrapper-components)）

添加类型是推荐的，因为它确保使用您组件的人可以轻松地发现他们应该提供哪些属性。

## `$props.id()`

此符文自 5.20.0 版本添加，生成一个仅对当前组件实例唯一的 ID。在服务器端渲染的组件中，该值将在服务器和客户端之间保持一致。

这对于通过属性如`for`和`aria-labelledby`链接元素很有用。

```svelte
<script>
	const uid = $props.id();
</script>

<form>
	<label for="{uid}-firstname">First Name: </label>
	<input id="{uid}-firstname" type="text" />

	<label for="{uid}-lastname">Last Name: </label>
	<input id="{uid}-lastname" type="text" />
</form>
```