mirror of
https://github.com/withastro/astro.git
synced 2025-01-23 02:51:53 -05:00
📘 DOC: show how to pass props (#1381)
* show how to pass props In the current documentation it is only shown how to receive props but not how to pass a component said props. This adds a bit of code which shows how to pass props to a component. * Update docs/src/pages/core-concepts/astro-components.md Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
This commit is contained in:
parent
63ca3df3ca
commit
0012a01541
1 changed files with 11 additions and 0 deletions
|
@ -184,6 +184,17 @@ const { greeting = 'Hello', name } = Astro.props;
|
|||
</div>
|
||||
```
|
||||
|
||||
You can then pass the component props like this:
|
||||
|
||||
```astro
|
||||
---
|
||||
// SomeOtherComponent.astro
|
||||
import SomeComponent from "./SomeComponent.astro";
|
||||
let firstName = "world!";
|
||||
---
|
||||
<SomeComponent name={firstName}/>
|
||||
```
|
||||
|
||||
### Slots
|
||||
|
||||
`.astro` files use the [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) tag to enable component composition. Coming from React or Preact, this is the same concept as `children`. You can think of the `<slot>` element as a placeholder for markup which will be passed in from outside of the component.
|
||||
|
|
Loading…
Reference in a new issue