如何从另一个组件调用函数到另一个组件

Question

现在我很困惑如何从组件中触发函数来控制另一个组件中的某些东西。谁能帮我解决这个问题？

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);
}

我在清单组件中有一个按钮想要激活阶段组件中的功能。

舞台组件是一个地图，具有 x y 位置和功能，可以在该组件内移动东西。

如何从外部（清单组件）调用阶段组件中的函数？

Answer 1

您有两个选择：

第一个也是最灵活的一个是创建一个可写的store以便在任何地方使用它

第二次使用 context

第三种是在App.svelte和bind中声明它到children

Answer 2

您可以执行以下操作：

从清单中调度自定义 checklist-click 事件。
在App中，监听这个点击事件，在舞台上调用fly。

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

有关调度组件事件的更多信息，请参阅 Svelte tutorial。

如何从另一个组件调用函数到另一个组件

How to call function from another component to another component

javascript

svelte

svelte-component