我有 3 个苗条的组件。比较应用程序，它导入比较一和比较二。两个如何在一个中调用一个函数？

【问题标题】：I have 3 svelte components. Comp App which imports Comp One and Comp Two. How can Two call a function in One?我有 3 个苗条的组件。比较应用程序，它导入比较一和比较二。两个如何在一个中调用一个函数？
【发布时间】：2019-10-28 19:42:05
【问题描述】：

我有 3 个纤细的组件。比较应用程序，它导入比较一和比较二。两个如何在一个中调用一个函数？

【问题讨论】：

标签： svelte svelte-component

【解决方案1】：

您可以从 Comp1 导出一个函数，该函数在 App 中得到引用，然后作为道具传递给 Comp2。

示例 (REPL)

<!-- Comp1.svelte -->
<script>
  export function foo() {
    alert('function in Comp1');
  }
</script>

<!-- Comp2.svelte -->
<script>
  export let onClick;
</script>

<button on:click="{onClick}">
  Click me
</button>

<!-- App.svelte -->
<script>
  import Comp1 from './Comp1.svelte';
  import Comp2 from './Comp2.svelte';

  let comp1;
</script>

<Comp1 bind:this="{comp1}" />
<Comp2 onClick="{() => comp1.foo()}" />

【讨论】：