¿Es posible ver cambios en una propiedad de componente fuera del componente?
He intentado usar la declaración $: pero parece que no funciona (excepto por primera vez, detectando cuándo está montado el componente).
Es decir, este es el componente cuya propiedad cambia desde el interior.
<script> export let title = 'Settings'; setTimeout(() => { title = 'Settings - Test'; }, 2000); // </script> <svelte:options accessors={true}/>y el componente que lo incluye:
<script> import SettingsPage from './Settings.svelte'; let page; let title = ''; $: { if (typeof page !== 'undefined') { title = page.title; } } $: title2 = typeof page !== 'undefined' ? page.title : ''; </script> After 2 seconds, the titles should change to "Settings - test" (it does not work). <h3>title: {title}</h3> <h3>title2: {title2}</h3> <div class="Page"> <svelte:component this={SettingsPage} bind:this={page} /> </div>Zona de juegos: https://svelte.dev/repl/91ef762b9f414223835fc1f08f20bd5d?version=3.42.2
Lamentablemente, la declaración reactiva no se activa en esta instancia. ¿Hay alguna manera de hacer que esto funcione únicamente con propiedades regulares? (Sé que hay soluciones alternativas, como usar una tienda como propiedad, pero me gustaría tenerla como accesorio regular si es posible).
En svelte, puede vincular fácilmente el title de propiedad de un componente para el componente SettingsPage usando <SettingsPage bind:title={title} /> . Al actualizar el accesorio de title en el componente, también actualizará el valor de su padre.
Echa un vistazo a la REPL .