javascript - Svelte behåll standardvärde för prop i en barnkomponent


Jag har component1 som tar let text som en prop och sedan component2 som gör nästan samma sak, men jag vill hålla component1 separat för bättre återanvändbarhet.

Så jag omslöt comp1 (Child.svelte) med comp2 (Wrapper.svelte). Men hur behåller jag standardvärdet för egenskapen i Child-komponenten utan att skriva det igen?

här är ett exempel:

//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>

Svar #1

Tack @hackape och @Stephane Vanraes för era svar!

svaret från @hackape verkar vara det svar jag letade efter, men det ger fortfarande detta typescript-fel: Property 'text' is missing in type '{}' but required in type '{ text: string; }'.ts(2322) när jag inte anger något värde för Wrapper-komponenten från utsidan.

Jag borde ha insett detta tidigare, men jag kombinerade båda svaren och kom fram till detta:

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

<Child bind:text />

fungerar även med <Child text={text}/>

Jag är relativt ny på Stack Overflow, bör jag acceptera mitt eller @hackapes svar?

Svar #2

Använd bind:prop för att skapa en tvåvägsbindning. Dokumentation: https://svelte.dev/tutorial/component-bindings

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

<Child bind:text />