📘 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:
Knniff 2021-09-24 01:23:35 +00:00 committed by GitHub
parent 63ca3df3ca
commit 0012a01541
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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.