Svelte：使用父组件的函数

Question

在我的 App.svelte 中，我的函数包含以下代码：

<script>
    import Categories from "./Categories.svelte";

    let choice = { category: false };

    export function toggle() {
         choice.category = !choice.category;
    }
</script>

{#if choice.category}
    <Categories />
{:else}
    <p>Foo.</p>
{/if}

在我的类别组件中，我有以下代码：

<button id="vegetation" on:click="toggle()">
    <span>Analyse vegetation and forestry</span>
</button>

我想要的是：当我单击类别组件中的按钮时，toggle()应该调用该函数。

我怎样才能做到这一点？

Answer 1

有两种方法：

使用事件

在这种情况下，您的组件将引发一个事件，并且父级对此做出反应：

<!-- Parent.svelte -->
<script>
  function something() { }
</script>

<Child on:toggle={something} />

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

  function toggle() {
     dispatch('toggle')
  }
</script>

<button on:click={toggle}>click me</button>

阅读文档中的事件

传递函数

另一种方法是将函数作为 prop 传递。

<!-- Parent.svelte -->
<script>
  function parentToggle() { }
</script>
<Child toggle={parentToggle} />

<!-- Child.svelte -->
<script>
  export let toggle = () => {} // no-operation function
</script>
<button on:click={toggle}>Click me</button>