Using multiple components

Svelte Component Cheat-Sheet

1. Create a Child Component

File: src/components/ChildComponent.svelte

src/components/ChildComponent.svelte

<script>
  const { name } = $props();
</script>

<p>Hello, {name}!</p>

2. Use the Child Component in Main App Component

File: src/App.svelte

src/App.svelte

<script>
  import ChildComponent from './components/ChildComponent.svelte';
</script>

<main>
  <ChildComponent name="Svelte" />
</main>

3. Display Result in Browser

URL: localhost

localhost

Hello, Svelte!

Key Points

• Exporting Props in Child Component:

  <script>
    const { name } = $props();
  </script>

  • const { name } = $props();: Svelte-specific syntax to allow prop passing.

• Using Child Component in Parent:

  <script>
    import ChildComponent from './components/ChildComponent.svelte';
  </script>
  
  <main>
    <ChildComponent name="Svelte" />
  </main>

  • import: Standard JavaScript ES6 syntax.

  • <ChildComponent name="Svelte" />: Svelte-specific syntax for including a component and passing props.

The name ChildComponent can be any name you like. It is not specific to Svelte.

Ensure that the file path in the import statement is correct. Incorrect paths will result in errors.