时间戳

首页 > 解决方案 > Svelte：使用来自父组件的函数

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

问题描述

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

我怎样才能做到这一点？

标签： sveltesvelte-component

解决方案

有两种方法：

使用事件

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

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

阅读文档中的事件

传递函数

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

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

推荐阅读