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>

阅读 docs

中的事件

传递函数

另一种方法是将函数作为 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>

Svelte：使用父组件的功能

Svelte: Use function from a parent component

svelte

svelte-component