javascript - Svelte beholde standardprop-verdi for en barnekomponent
Jeg har component1 som tar let text som en prop, og så component2 som gjør nesten det samme, men jeg vil gjerne holde component1 separat for bedre gjenbrukbarhet.
Så jeg pakket inn comp1 (Child.svelte) med comp2 (Wrapper.svelte). Men hvordan beholder jeg standardprop-verdien til Child-komponenten uten å skrive den igjen?
her er et eksempel:
//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
Takk @hackape og @Stephane Vanraes for svarene deres!
svaret fra @hackape virker som svaret jeg lette etter, men det gir fortsatt denne typescript-feilen: Property 'text' is missing in type '{}' but required in type '{ text: string; }'.ts(2322) når jeg ikke gir noen verdi til Wrapper-komponenten fra utsiden.
Jeg burde ha innsett dette tidligere, men jeg kombinerte begge svarene og kom opp med dette:
//Wrapper.svelte
<script lang="ts">
import Child from "./Child.svelte";
export let text: string = undefined;
</script>
<Child bind:text />
fungerer også med <Child text={text}/>
Jeg er relativt ny på Stack Overflow, bør jeg godta mitt eller @hackapes svar?
Svar #2
Bruk bind:prop for å lage en toveis binding. Dokumentasjon: https://svelte.dev/tutorial/component-bindings
//Wrapper.svelte
<script lang="ts">
import Child from "./Child.svelte";
export let text: string
</script>
<Child bind:text />
