Passing Data with Props in Svelte | CodeSignal Learn

Passing Data with Props in Svelte | CodeSignal Learn

Introduction to Props in Svelte

Welcome to the first lesson of the "Component Communication & Events in Svelte" course. In this lesson, we will focus on component communication, specifically how to pass data from a parent component to a child component using props . Props (short for "properties") are a way to share data between components. Think of props as passing a note from one person to another—the parent component writes the note (data), and the child component reads it. This is a fundamental concept in Svelte and is essential for building scalable and maintainable applications. In this lesson, we’ll explore how to define and pass props, including complex data types like objects, and how to use them effectively in your components. By the end, you’ll be able to pass data from a parent component to a child component, just like in the example.

Defining and Passing Props

To pass data from a parent component to a child component, you first need to define the props in the child component. In Svelte 5, you can use the $props() function to access the props passed from the parent. Let’s start with a simple example: passing a string prop. Svelte <!-- Parent.svelte --> <script> import Child from './Child.svelte'; </script> <Child placeholder="Enter your name" /> Svelte <!-- Child.svelte --> <script> let { placeholder } = $props(); </script> <input type="text" placeholder={placeholder} /> In this example, the parent component (Parent.svelte) passes a placeholder prop to the child component (Child.svelte). The child component extracts placeholder from $props() and applies it to the <input> field. When you run this code, the input field will display the placeholder text "Enter your name." In Svelte, the $props() function allows a child component to access props passed from its parent. However, it’s important to note that $props() itself does not trigger reactivity. When a parent component updates a prop, the child component receives the new value, but the $props() function doesn’t automatically cause a reactive update like $state . To ensure that changes to props are properly tracked within the child component, you can either destructure the needed values or assign them to $state . This approach helps maintain reactivity and ensures your components stay in sync with their data sources.

Forwarding Extra Props with ...rest

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

In some cases, a component may need to accept additional props dynamically without explicitly defining each one. This is useful when creating wrappers around elements like <input>, <button>, or <a> tags. To achieve this, you can use the rest syntax (...rest) to collect all extra props and forward them. <!-- Parent.svelte --> <script> import InputField from './InputField.svelte'; </script> <InputField label="Username" type="text" placeholder="Enter username" required /> <!-- InputField.svelte --> <script> let { label, ...rest } = $props(); </script> <label> {label} <input {...rest} /> </label> In this example: The parent component passes multiple props (label, type, placeholder, required). The child component extracts only label, while ...rest gathers all other props . These extra props are spread onto the <input> element, ensuring it automatically receives all attributes passed from the parent. This technique allows components to remain flexible and reusable, making it easy to support any additional attributes without needing explicit definitions.

Passing Complex Data with Props

Props aren’t limited to simple data types like strings—you can also pass objects, arrays, and more . Let’s expand on our previous example by passing a user object alongside additional props. <!-- Parent.svelte --> <script> import Child from './Child.svelte'; let user = $state({ name: "Alice" }); function changeName(name) {user.name = name;} </script> <input type="text" oninput={(e) => changeName(e.target.value)} value={user.name}> <Child {user} placeholder="Enter your name" lastName="Smith" /> <!-- Child.svelte --> <script> let { user, placeholder, lastName } = $props(); </script> <p>User: {user.name}</p> <p>Placeholder: {placeholder}</p> <p>Last Name: {lastName}</p> Now, when you type in the input field, the user.name updates in real time. Since the user object is reactive in the parent, the child component automatically reflects the changes, demonstrating how props remain linked to parent state. This is an important aspect of Svelte’s reactivity model, ensuring that when the parent updates a prop, the child receives the latest value. Note: Props should never be modified inside a child component . Since props are passed from parent to child, changes should always be made in the parent component and propagated down.

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  
  let user = $state({ name: "Alice" });

  function changeName(name) {
    user.name = name;
  }
</script>

<input type="text" oninput={(e) => changeName(e.target.value)} value={user.name}>
<Child {user} placeholder="Enter your name" lastName="Smith" />