Svelte keep default prop value of a child component

user_12518099 0
Viewed 510

I have component1 that takes let text as a prop and then component2 that does almost the same thing, but I'd like to keep component1 separate for better reusability.

So I wrapped the comp1 (Child.svelte) with comp2 (Wrapper.svelte). But how do I keep the default prop value of the Child component without writing it again?

here is an example:

//Wrapper.svelte
<script lang="ts">
    import Child from "./Child.svelte";
    export let text = 'hello world'; //need to type the default value again
</script>

<Child text={text} />

//Child.svelte
<script lang="ts">
    export let text = 'hello world';
</script>

<p>{text}</p>
svelte-component svelte typescript javascript
2 Answers

Thank you @hackape and @Stephane Vanraes for your answers!

the answer from @hackape seems like the answer I was looking for, but It still throws this typescript error: Property 'text' is missing in type '{}' but required in type '{ text: string; }'.ts(2322) when I don't provide any value to Wrapper comp. from the outside.

I should have realised this earlier, but I combined both answers and came up with this:

//Wrapper.svelte
<script lang="ts">
    import Child from "./Child.svelte";
    export let text: string = undefined;
</script>

<Child bind:text />

also works with <Child text={text}/>

I am relatively new to Stack Overflow, should I accept my or @hackapes answer?

user_125180990
user_36173800
Related