How to pass properties in Svelte 3 component?

Ashutosh Kukreti

In our last article (here), We learn how to add components in Svelte. But we haven't passed any real data into it.

In the FirstComponent.svelte, replace the contents with the following code:

<script>
    export let firstName;
    export let lastName;
</script>

<h1> The first name is {firstName} </h1>
<h1> The last name is {lastName} </h1>

<style>
  p {
      text-align: center;
      padding: 1em;
      max-width: 240px;
      margin: 0 auto;
   }
</style>
FirstComponent.svelte

In this, we declare two variables, firstName, and lastName. In the Html section, we render the variables using {firstName} and {lastName}.

In App.svelte, where we already import the component, we need to pass the value of the variable to the component.

<main>
    <FirstComponent firstName={"Michael"} lastName={"Foo"} />
</main>
App.svelte

On the webpage, you'll see

Svelte Home Page

Please subscribe/signup for regularly getting the updates.

Svelte3JavaScriptBeginners