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>
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?
Use bind:prop to create a two way binding. Docs: https://svelte.dev/tutorial/component-bindings
//Wrapper.svelte
<script lang="ts">
import Child from "./Child.svelte";
export let text: string
</script>
<Child bind:text />