Svelte - Props

---

---

Props in Svelte are a powerful feature that allows for the creation of dynamic and reusable components. They enable a clear and manageable data flow from parent to child components. By using props effectively, you can build complex applications while keeping your code organized and maintainable.

What are Props?

Props is short form for properties are a mechanism to pass data from a parent component to a child component. This feature of svelte allows you to create reusable and dynamic components, making your applications more modular and efficient.

Declaring Props in Svelte

To effectively use or declare props in Svelte, follow these steps:

• Create a Child Component: Firstly, have to create a child component that will accept the prop form the parent component. For example: Child.svelte.
• Define the Prop in the Child Component: Use the export keyword to define the prop in the child component. This allows the parent component to use it.

<script>
    export let userName; // Declare a prop named 'userName'
</script>

Create a Parent Component: Next, make a parent component such as App.svelte. This component will send a value to the name prop of the Child component.

Pass the Prop from the Parent Component: When using the child component in the parent, you can pass values to it as attributes.

<script>
    export let userName; // Declare a prop named 'userName'
</script>

Use the Prop in the Child Component: You can then use this prop within your child component's template.

<p>Hey there! Welcome to</p>
<h1>{userName}</h1>

Using Default Values in Props

Svelte allows you set default values for props. If the parent doesn't provide a prop, the child will use this default value.

<script>
  export let userName= 'Tutorialspoint'; // Default value
</script>

Spreading Props

When you have an object with several props, you can use the spread operator to send those props into a component. For scenarios where multiple props are available, spread allow us to use those props simultaneously as a single object.

<script>
	import Child from './Child.svelte'; 

	let childBox ={
		userName: "Tutorialspoint",
		country: "India's",
		company: "EdTech Company"
	}
</script>

<main>
    <Child {...childBox} />
</main>

Example

The following example is illustrating the use of spreading props in svelte.

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

  let childBox ={
    userName: "Tutorialspoint",
    country: "India's",
    company: "EdTech Company"
  }
</script>

<main>
    <Child {...childBox} />
</main>

<!--Child.svelte-->
<script>
    export let userName; // Declare the prop
    export let country;
    export let company;
</script>
  
<p>Hey there! Welcome to</p>
<h1>{userName}</h1>
<h2>{country} best {company}</h2>

Output