How to pass the props to Svelte component from Javascript?

Question

I have the default page of my webapp which redirects to different components, something like as follows:

<script>
  import page from "page";
  import Form from "./Form.svelte";
  import Dashboard from "./Dashboard.svelte";

  let content = "";
  page.base("/");
  page("", function() {
    content = Form;
  });
  page("dashboard", function() {
    content = Dashboard;
  });
  page({
    hashbang: true
  });
</script>

Now, if I want to pass some props in say, Dashboard page from here, how can I do that? I tried following but it didn't work.

content = new Dashboard({
    props: {
        answer: 42
    }
});

Can't you use Sapper?

Talgat Saribayev
– Talgat Saribayev

2019-09-19 11:10:32 +00:00
Commented Sep 19, 2019 at 11:10 — Talgat Saribayev
– Talgat Saribayev, Commented Sep 19, 2019 at 11:10

user2803857 · Accepted Answer · 2019-09-19 17:31:43Z

2

See the docs for <svelte:component>. To pass down arbitrary props you can use an attribute spread:

<svelte:component this={content} {...props}/>

Here's a live example: https://svelte.dev/repl/74593f36569a4c268d8a6ab277db34b5?version=3.12.1

Here's an official example (currently doesn't demonstrate passing down props): https://svelte.dev/examples#svelte-component

answered Sep 19, 2019 at 17:31

user2803857

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass the props to Svelte component from Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related