javascript - Svelte giữ giá trị prop mặc định của một component con

Tôi có component1 nhận let text như một prop và sau đó component2 làm gần như cùng một việc, nhưng tôi muốn giữ component1 tách riêng để tái sử dụng tốt hơn.

Vậy nên tôi đã bọc comp1 (Child.svelte) bằng comp2 (Wrapper.svelte). Nhưng làm thế nào để tôi giữ giá trị prop mặc định của component Child mà không cần viết lại?

đây là một ví dụ:

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

Câu trả lời #1

Cảm ơn @hackape và @Stephane Vanraes vì câu trả lời của các bạn!

Câu trả lời từ @hackape có vẻ là câu trả lời mà tôi đang tìm, nhưng nó vẫn gây ra lỗi typescript này: Property 'text' is missing in type '{}' but required in type '{ text: string; }'.ts(2322) khi tôi không cung cấp bất kỳ giá trị nào cho component Wrapper từ bên ngoài.

Lẽ ra tôi nên nhận ra điều này sớm hơn, nhưng tôi đã kết hợp cả hai câu trả lời và đưa ra điều này:

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

<Child bind:text />

cũng hoạt động với <Child text={text}/>

Tôi khá mới trên Stack Overflow, tôi có nên chấp nhận câu trả lời của mình hay của @hackapes không?

Câu trả lời số 2

Sử dụng bind:prop để tạo liên kết hai chiều. Tài liệu: https://svelte.dev/tutorial/component-bindings

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

<Child bind:text />