mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-29 00:22:05 +01:00
129 lines
3.3 KiB
Markdown
129 lines
3.3 KiB
Markdown
---
|
|
title: $props
|
|
---
|
|
|
|
The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
|
|
|
|
```svelte
|
|
<script>
|
|
import MyComponent from './MyComponent.svelte';
|
|
</script>
|
|
|
|
/// file: App.svelte
|
|
<MyComponent adjective="cool" />
|
|
```
|
|
|
|
On the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...
|
|
|
|
```svelte
|
|
<script>
|
|
let props = $props();
|
|
</script>
|
|
|
|
/// file: MyComponent.svelte
|
|
<p>this component is {props.adjective}</p>
|
|
```
|
|
|
|
...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:
|
|
|
|
```svelte
|
|
/// file: MyComponent.svelte
|
|
<script>
|
|
let +++{ adjective }+++ = $props();
|
|
</script>
|
|
|
|
<p>this component is {+++adjective+++}</p>
|
|
```
|
|
|
|
## Fallback values
|
|
|
|
Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
|
|
|
|
```js
|
|
/// file: MyComponent.svelte
|
|
let { adjective = 'happy' } = $props();
|
|
```
|
|
|
|
> [!NOTE] Fallback values are not turned into reactive state proxies.
|
|
|
|
## Renaming props
|
|
|
|
We can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:
|
|
|
|
```js
|
|
let { super: trouper = 'lights are gonna find me' } = $props();
|
|
```
|
|
|
|
## Rest props
|
|
|
|
Finally, we can use a _rest property_ to get, well, the rest of the props:
|
|
|
|
```js
|
|
let { a, b, c, ...others } = $props();
|
|
```
|
|
|
|
## Updating props
|
|
|
|
References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
|
|
|
|
<!-- prettier-ignore -->
|
|
```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} />
|
|
```
|
|
|
|
<!-- prettier-ignore -->
|
|
```svelte
|
|
/// file: Child.svelte
|
|
<script>
|
|
let { count } = $props();
|
|
</script>
|
|
|
|
<button onclick={() => (count += 1)}>
|
|
clicks (child): {count}
|
|
</button>
|
|
```
|
|
|
|
## Type safety
|
|
|
|
You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...
|
|
|
|
```svelte
|
|
<script lang="ts">
|
|
let { adjective }: { adjective: string } = $props();
|
|
</script>
|
|
```
|
|
|
|
...while in JSDoc you can do this:
|
|
|
|
```svelte
|
|
<script>
|
|
/** @type {{ adjective: string }} */
|
|
let { adjective } = $props();
|
|
</script>
|
|
```
|
|
|
|
You can, of course, separate the type declaration from the annotation:
|
|
|
|
```svelte
|
|
<script lang="ts">
|
|
interface Props {
|
|
adjective: string;
|
|
}
|
|
|
|
let { adjective }: Props = $props();
|
|
</script>
|
|
```
|
|
|
|
Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
|