Tengo el componente 1 que toma let text como accesorio y luego el componente 2 que hace casi lo mismo, pero me gustaría mantener el componente 1 separado para una mejor reutilización.
Así que envolví comp1 ( Child.svelte ) con comp2 ( Wrapper.svelte ). Pero, ¿cómo mantengo el valor de utilería predeterminado del componente secundario sin volver a escribirlo?
Aquí hay un ejemplo:
//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>¡Gracias @hackape y @Stephane Vanraes por sus respuestas!
la respuesta de @hackape parece ser la respuesta que estaba buscando, pero aún arroja este error de mecanografiado: Property 'text' is missing in type '{}' but required in type '{ text: string; }'.ts(2322) cuando no proporciono ningún valor a Wrapper comp. desde fuera.
Debería haberme dado cuenta de esto antes, pero combiné ambas respuestas y obtuve esto:
//Wrapper.svelte <script lang="ts"> import Child from "./Child.svelte"; export let text: string = undefined; </script> <Child bind:text /> también funciona con <Child text={text}/>
Soy relativamente nuevo en Stack Overflow, ¿debería aceptar mi respuesta o la de @hackapes?
Use bind:prop para crear un enlace bidireccional. Documentos: https://svelte.dev/tutorial/component-bindings
//Wrapper.svelte <script lang="ts"> import Child from "./Child.svelte"; export let text: string </script> <Child bind:text />