Svelte：使用来自父组件的函数

【问题标题】：Svelte: Use function from a parent componentSvelte：使用来自父组件的函数
【发布时间】：2021-09-09 01:54:04
【问题描述】：

在我的 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()函数。

我该怎么做？

【问题讨论】：

您可以转发点击事件（不使用调度程序）。教程中的示例：svelte.dev/tutorial/dom-event-forwarding

标签： svelte svelte-component

【解决方案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>

阅读docs中的事件

传递函数

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

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

【讨论】：