svelte/documentation/tutorial/03-props/01-declaring-props/text.md

---
title: Declaring props
---

So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.

In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare _properties_, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:

```svelte
<script>
	export let answer;
</script>
```

> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
Add a tutorial (#2132) 6 years ago			`---`
			`title: Declaring props`
			`---`

			`So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.`

feat(site-2): Update links, move blog out of SK folder to content (#8289) * Update links * Move blog to site/content * Update site/content/docs/02-component-format.md * Fix docs links * Add global prettierrc * Auto format * Fix git merge artifact * Fix errors * Update html to svelte(remaining ones) * Add 2 blog posts * Modify prettierrc * Minor design fix * Switch package lock to spaces, prettier ignore * Regenerate package lock * prettier format * Update deps * Hack the build into working * add missing blog post --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Rich Harris <git@rich-harris.dev> 2 years ago			In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare _properties_, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:
Add a tutorial (#2132) 6 years ago
feat(site-2): Update links, move blog out of SK folder to content (#8289) * Update links * Move blog to site/content * Update site/content/docs/02-component-format.md * Fix docs links * Add global prettierrc * Auto format * Fix git merge artifact * Fix errors * Update html to svelte(remaining ones) * Add 2 blog posts * Modify prettierrc * Minor design fix * Switch package lock to spaces, prettier ignore * Regenerate package lock * prettier format * Update deps * Hack the build into working * add missing blog post --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Rich Harris <git@rich-harris.dev> 2 years ago			```svelte
Add a tutorial (#2132) 6 years ago			`<script>`
			`export let answer;`
			`</script>`
			```

feat(site-2): Update links, move blog out of SK folder to content (#8289) * Update links * Move blog to site/content * Update site/content/docs/02-component-format.md * Fix docs links * Add global prettierrc * Auto format * Fix git merge artifact * Fix errors * Update html to svelte(remaining ones) * Add 2 blog posts * Modify prettierrc * Minor design fix * Switch package lock to spaces, prettier ignore * Regenerate package lock * prettier format * Update deps * Hack the build into working * add missing blog post --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Rich Harris <git@rich-harris.dev> 2 years ago			> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.