Child Component

Child.svelte

<!-- Child.svelte -->

<!-- Script Section -->
<script>
  // Import necessary functions from Svelte
  import { createEventDispatcher } from 'svelte';

  // Create a dispatcher for emitting custom events
  const dispatch = createEventDispatcher();

  // Define variables to store form data
  let username = '';
  let email = '';
  let password = '';

  // Function to handle form submission
  const handleSubmit = () => {
    // Emit a custom event named 'submit' with form data
    dispatch('submit', { username, email, password });
  };
</script>

<!-- Form Markup -->
<form on:submit|preventDefault={handleSubmit}>
  <!-- Input fields for username, email, and password -->
  <label>
    Username:
    <input type="text" bind:value={username} />
  </label>
  <label>
    Email:
    <input type="email" bind:value={email} />
  </label>
  <label>
    Password:
    <input type="password" bind:value={password} />
  </label>
  <!-- Button to submit the form -->
  <button type="submit">Submit</button>
</form>