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.

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.

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.

When working with props, it’s important to follow best practices to maintain clean and efficient components:

• Use ...rest for flexibility
  If a component needs to accept arbitrary attributes, ...rest makes it adaptable and scalable.

• Avoid overloading components with too many props
  Keep prop usage minimal and focused on the component’s purpose.

• Mutating Props Directly in the Child Component
  Props should be treated as read-only in the child component. If you need to modify the data, consider passing a callback function or using a reactive state in the parent component.

• Best Practices

  • Use descriptive prop names to make your code more readable.
  • Keep props minimal and focused on the component’s purpose.
  • Use objects to group related props together, making it easier to pass and manage them.

In this lesson, you learned:

• How to define and pass props using $props().
• How to forward extra props dynamically using ...rest.
• How to pass complex data like objects between components.
• Best practices for scalable, maintainable component communication.

These concepts are essential for building reusable components in Svelte. In the next exercises, you’ll apply what you’ve learned by dynamically passing props and handling data efficiently!