Svelte如何实现子组件点击按钮触发父组件定义的toggle函数

有两种常用的实现方式，你可以根据场景选择：

方案1：将toggle函数作为props传递给子组件 #

这是最直接的实现方式，修改步骤如下：

1. 调整父组件App.svelte代码，在渲染Categories组件时传入toggle函数作为prop：

<script>
    import Categories from "./Categories.svelte";
    let choice = { category: false };
    // 这里不需要export，直接作为普通函数传递即可
    function toggle() {
         choice.category = !choice.category;
    }
</script>
{#if choice.category}
    <!-- 把toggle函数作为prop传给子组件 -->
    <Categories {toggle} />
{:else}
    <p>Foo.</p>
{/if}

2. 调整子组件Categories.svelte代码，接收toggle prop并绑定到按钮点击事件：

<script>
    // 接收父组件传入的toggle函数
    export let toggle;
</script>
<!-- Svelte事件绑定用大括号包裹表达式，不要用字符串形式 -->
<button id="vegetation" on:click={toggle}>
    <span>Analyse vegetation and forestry</span>
</button>

方案2：通过自定义事件派发实现（更符合单向数据流规范） #

如果希望遵循单向数据流的最佳实践，可以用Svelte的事件派发机制：

1. 调整子组件Categories.svelte代码，派发自定义toggle事件：

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
</script>
<button id="vegetation" on:click={() => dispatch('toggle')}>
    <span>Analyse vegetation and forestry</span>
</button>

2. 调整父组件App.svelte代码，监听子组件的toggle事件：

<script>
    import Categories from "./Categories.svelte";
    let choice = { category: false };
    function toggle() {
         choice.category = !choice.category;
    }
</script>
{#if choice.category}
    <!-- 监听子组件派发的toggle事件，触发父组件的toggle方法 -->
    <Categories on:toggle={toggle} />
{:else}
    <p>Foo.</p>
{/if}

注意事项 #

• 你原代码中on:click="toggle()"的写法是错误的，Svelte的事件绑定需要用大括号包裹JS表达式，不能使用字符串形式的调用。
• 如果toggle函数需要传参，两种方案都可以灵活调整：props传参可以直接在子组件调用时传，事件派发可以把参数放在dispatch的第二个参数中传递。

内容的提问来源于stack exchange，提问作者ScienceNoob