我有 3 个苗条的组件。 Comp App 导入 Comp One 和 Comp Two。二如何在一中调用一个函数？

Question

我有 3 个苗条的组件。 Comp App 导入 Comp One 和 Comp Two。二人如何在一人中调用一个函数？

Answer 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()}" />

我有 3 个苗条的组件。 Comp App 导入 Comp One 和 Comp Two。二如何在一中调用一个函数？

I have 3 svelte components. Comp App which imports Comp One and Comp Two. How can Two call a function in One?

svelte

svelte-component