Ahora estoy confundido sobre cómo activar la función desde el componente para controlar algo en otro componente. ¿Puede alguien ayudarme con esto?
Structure: App.svelte L checklist.svelte L button <-- this button want to call function in stage component L stage.svelte checklist.svelte: <button on:click="handleMove" /> stage.svelte: export function fly(x, y) { $map.flyto(x, y); }Tengo un botón en el componente de lista de verificación que quiere activar la función que está en el componente de etapa.
El componente de escenario es un mapa que tiene una posición xy y una función que mueve cosas dentro de este componente.
¿Cómo puedo llamar a la función en el componente del escenario desde el exterior (componentes de la lista de verificación)?
Tienes unas cuantas opciones:
primero y el más flexible es crear una store de escritura para usarla en cualquier lugar
segundo para usar context
el tercero es declararlo en App.svelte y bind a ambos niños
Podrías hacer lo siguiente:
checklist-click personalizado desde Lista de verificación.fly on Stage. <!-- App.svelte --> <script> import Checklist from './Checklist.svelte'; import Stage from './Stage.svelte'; let stage; function handleClick({ detail }) { // these come from the second argument to dispatch in Checklist.svelte const { x, y } = detail; stage.fly(x, y); } </script> <h1>App</h1> <!-- Listen to the event fired with dispatch('checklist-click') --> <Checklist on:checklist-click={handleClick}></Checklist> <!-- Store a reference to this component instance so that we can call `fly` on it --> <Stage bind:this={stage}></Stage> <!-- Checklist.svelte --> <script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); function handleMove() { dispatch('checklist-click', {x: 5, y: 10}); } </script> <h2>Checklist</h2> <button on:click={handleMove}> Move </button> <!-- Stage.svelte --> <script> export function fly(x, y) { console.log(`fly called from stage with x: ${x}, y: ${y}`); } </script> <h2>Stage</h2>Para obtener más información sobre el envío de eventos de componentes, consulte el tutorial de Svelte .